Study notes · 12% of the exam

Rendering, Reconciliation and Keys

Know what triggers a render, how React decides which state survives (type plus position plus key), and the exact order of renders, cleanups and effects, including what StrictMode adds in development.

Key points

1
Only three things trigger a render: the component's own state changing, its parent rendering, or a context it reads changing. Mutating props or refs triggers nothing.
2
Rendering is recursive by default: a rendering component renders every element it creates. Elements passed in as children or other props from a component that did not render are the same objects, so React skips them.
3
State is tied to a position in the tree. Same type at the same position keeps state; a different type, a different ancestor type, a changed key or a move to another parent remounts the subtree.
4
{cond && <A />} keeps its slot when false, so later siblings keep their state. Returning structurally different trees can shift positions and reset state.
5
Effects run after commit, child before parent. On updates, all changed cleanups run before any new setup. On unmount, cleanups run top-down from the removed root.
6
Setting state to an Object.is-equal value bails out, but React may call the component once more before skipping its children. Setting your own state during render re-runs the component immediately and discards the first output.
7
Development StrictMode renders twice (including state initialisers) and runs setup, cleanup, setup for effects on the same instance, so state and refs persist through that cycle.

Common traps

Index keys bind state and uncontrolled DOM values to positions, so deleting or prepending items moves typed text and local state onto the wrong rows.
Declaring a component inside another component creates a new type on every render, which remounts it and loses its state.
In React 19 a hydration mismatch makes React regenerate the tree on the client and report a recoverable error; suppressHydrationWarning works only one level deep and keeps the server text.

Read the source

Test yourself on Rendering, Reconciliation and Keys

Ten questions, with the answer and explanation after each one.