How React Works · Part 098 min read
Hooks: Why Order Matters
Hooks 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.
Archive
#react
12 notes match these filters
- How React Works · Part 047 min read
State Updates: Snapshots and Batching
Each 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.
- How React Works · Part 129 min read
A Click, Start to Finish
One 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.
- How React Works · Part 087 min read
The Commit Phase and Effects
What React does once a render is finished, in what order DOM changes, refs and effects happen, and how to choose between useLayoutEffect and useEffect.
- How React Works · Part 037 min read
What Rendering Really Means
Rendering 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.
- How React Works · Part 118 min read
Memoization and the React Compiler
Why 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.
- How React Works · Part 027 min read
Elements, Components and the Tree
JSX 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.
- How React Works · Part 077 min read
Priorities, Transitions and Concurrency
How 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.
- How React Works · Part 017 min read
The Big Idea: UI Is a Function of State
React 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.
- How React Works · Part 107 min read
Events: One Listener at the Root
React 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.