Skip to contentObsidian Garden
All posts

Series

How React Works

A plain-language course on the ideas behind React 19, from UI as a function of state through rendering, reconciliation, fiber, priorities, commit and hooks, built on one small app.

Parts
12
Reading time
1 h 30 min
Updated
Start reading Begins with The Big Idea: UI Is a Function of State

You use React every day. You know that setState "triggers a re-render", that keys "help React", that useEffect "runs after render". This course replaces those half-sentences with a model you can actually reason with: what a render is, why state looks stale right after you set it, how React decides what changed, why it can pause work, what the commit phase does, and why the rules of hooks exist.

It is written for working React developers who have never looked inside. You need no knowledge of React's source. Every part explains one idea in plain terms, with one small shopping list app as the running example, so each new concept lands on code you have already seen. Diagrams show the flows, and every part ends with a short recap.

This is the conceptual companion to React Internals. That course walks through React 19.3.1 line by line, with every claim tied to the source. This one stays at the level of ideas and never asks you to read React's code. They pair well: read a part here to get the model, then follow its Go deeper link into React Internals when you want to see exactly how the model is implemented.

Parts

  1. The big idea: UI is a function of state
  2. Elements, components and the tree
  3. What rendering really means
  4. State updates: snapshots and batching
  5. Reconciliation: finding what changed
  6. Fiber: work you can pause
  7. Priorities, transitions and concurrency
  8. The commit phase and effects
  9. Hooks: why order matters
  10. Events: one listener at the root
  11. Memoization and the React Compiler
  12. A click, start to finish

The learning path

The parts

12 parts
  1. 01The Big Idea: UI Is a Function of StateReact lets you describe what the screen should look like for a given state, and takes over the job of figuring out and applying the changes, in two phases called render and commit.7 min read
  2. 02Elements, Components and the TreeJSX compiles to plain, immutable element objects; components are functions that return them; and React keeps its own long-lived tree to connect those throwaway descriptions to the real DOM.7 min read
  3. 03What Rendering Really MeansRendering is React calling your components to get a fresh description of the UI; it happens for four reasons, may run more than once or be thrown away, and does not by itself change the DOM.7 min read
  4. 04State Updates: Snapshots and BatchingEach render sees a fixed snapshot of state; calling a setter queues an update instead of changing a variable, and React batches every update from one event into a single render that runs after your handler returns.7 min read
  5. 05Reconciliation - Finding What ChangedHow React compares the new element tree with the old one in roughly linear time, why type and key decide whether state survives, and what the comparison hands to the commit.8 min read
  6. 06Fiber - Work You Can PauseWhy React replaced recursion with fibers, how a render walks a linked tree one unit at a time, and what it means that React can pause or throw away unfinished work.8 min read
  7. 07Priorities, Transitions and ConcurrencyHow React decides which update to render first, what startTransition and useDeferredValue really change, and how the Scheduler yields to the browser without letting slow work starve.7 min read
  8. 08The Commit Phase and EffectsWhat React does once a render is finished, in what order DOM changes, refs and effects happen, and how to choose between useLayoutEffect and useEffect.7 min read
  9. 09Hooks: Why Order MattersHooks have no names or keys; React stores them as an ordered list on each component's fiber and matches them by call position, which is the whole reason the Rules of Hooks exist.8 min read
  10. 10Events: One Listener at the RootReact never attaches your onClick to the button; one listener per event type on the root container finds the target's fiber, walks the component tree to collect your handlers, and gives their updates a priority.7 min read
  11. 11Memoization and the React CompilerWhy a parent's re-render re-runs its children, when React.memo, useMemo and useCallback actually help, and how the React Compiler makes the same bailouts fire automatically without making React fine-grained.8 min read
  12. 12A Click, Start to FinishOne click on "Add" in the shopping list app, followed from the root listener through batched sync updates, rendering, keyed reconciliation and the commit to the moment the new item is painted.9 min read