---
title: "A love letter to React"
description: "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."
---

# A love letter to React

[Fly.io](https://yomu.fyi/company/fly-io) · Nov 2, 2022

**Type:** Explainer

## 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.

## Context

React’s component model, JSX colocation, and virtual DOM influenced frontend development and helped shape Phoenix LiveView. The post focuses on why these ideas made interactive applications easier to understand, maintain, compose, and update efficiently, including across a networked server-client boundary.

## Approach / What changed

The post compares React’s stateful render model with Phoenix LiveView’s stateful server processes, then describes HTML-aware function components, slots, colocated code, HEEx static and dynamic tracking, server-side diff rendering, minimal network updates, and morphdom-based client patches.

## Takeaways

- 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.
- 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.
- 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.

**Tags:** [Phoenix](https://yomu.fyi/topic/phoenix), [React](https://yomu.fyi/topic/react)

- Source: [Fly.io](https://fly.io/blog/love-letter-react)
- Source URL: https://fly.io/blog/love-letter-react
- Ingested by Yomu: 2026-09-02T11:58:32.665Z

[Read original post](https://fly.io/blog/love-letter-react)