A love letter to React

Summary

React’s 2013 release had a lasting impact on frontend development and influenced Phoenix LiveView through its reactive component model, JSX colocation, and efficiency. Chris McCord explains how a component’s state and render function create a simple programming model, then shows LiveView adapting that model to a stateful server process with HTML-aware function components and slots. The discussion argues that tightly coupled markup and code should live together, while extensible components preserve HTML structure and support customization without bespoke templates. For rendering efficiency, React computes virtual DOM diffs, whereas LiveView tracks static and dynamic HEEx template parts, sends minimal diffs over the network, and applies client-side patches with morphdom. The conclusion credits React with shaping Phoenix’s direction and argues that backend frameworks should provide HTML-aware component systems.

Takeaways

1. 1

   LiveView adapts React’s state-and-render model to a stateful server process, allowing state changes to trigger updated HTML without bespoke routes, controllers, serializers, JSON APIs, or GraphQL endpoints.

2. 2

   Colocating tightly coupled markup and stateful code reduces the need to search across distant template files; when one file is impractical, colocated files or directories are presented as the next-best arrangement.

3. 3

   LiveView tracks static and dynamic HEEx template sections, computes minimal server-side diffs, sends only changed dynamic content over the network, and uses morphdom to apply minimal client-side DOM patches.