Track K

React internals, under the hood

How React actually works: the virtual DOM and reconciliation, JSX and elements, the diffing heuristics, the fiber tree, render vs commit phases, hooks as a linked list, scheduling, and re-renders.

1. The virtual DOM and reconciliation

   React's central trick is that you never tell it to change the DOM — you describe what the UI should look like right now as a tree of plain objects, and React compares that description against the previous one and works out the minimal set of real DOM mutations itself. This lesson builds that model, dispels the myth that the virtual DOM is magically fast, and frames everything the rest of the module opens up.

   12 min
2. Elements, components, and JSX

   The tree React reconciles is made of elements — plain, inert objects produced by a compiler step — and getting precise about that removes most of what feels like magic in JSX and components.

   12 min
3. The diffing algorithm: heuristics and keys

   A truly optimal tree diff is far too expensive to run on every render, so React bets on two heuristics to get a linear-time diff — and the second one is exactly why lists need keys.

   13 min
4. Fiber: the data structure React reconciles over

   Reconciliation has to walk a tree, pause partway through, and resume later — so React represents every element as a fiber, a plain JavaScript object with parent/child/sibling pointers that lets the whole tree be traversed without the call stack, one interruptible unit of work at a time.

   13 min
5. Render and commit: the two phases of an update

   Every React update runs through two phases with opposite rules — an interruptible render phase that builds the work-in-progress tree and must stay pure, followed by a single uninterruptible commit pass that applies every DOM change at once so the user never sees a half-updated screen.

   13 min
6. Hooks: state as a linked list on the fiber

   A hook call looks like plain function-call magic that somehow remembers state across renders, but the mechanism is concrete — each fiber holds an ordered linked list of hook records, and React matches your Nth hook call to the Nth record purely by call order, which is the one fact behind both how state persists and why the rules of hooks exist.

   13 min
7. Scheduling and concurrent React

   Because fiber makes reconciliation interruptible, React can behave like a cooperative scheduler on the main thread — doing a chunk of rendering work, yielding so the browser can paint and handle input, then resuming — and that single mechanism is what every concurrent feature, from transitions to Suspense, is built on top of.

   13 min
8. Re-renders, memoization, and performance

   A component re-renders when its own state changes or its parent re-renders, so updates cascade down a tree by default — but a re-render is not the same thing as a DOM mutation, and knowing exactly what triggers one plus the handful of memoization tools that prune the cascade is what closes out this module.

   14 min