Bailout, memoisation, and tearing

A component wrapped in React.memo still re-renders on every parent render. Nothing changed. The memo is there. Open the DevTools Profiler and the reason says “props changed” — but the prop is an object whose contents are identical. The problem is not the memo. The problem is an inline object literal passed as a prop: a fresh reference every render, and Object.is always reports a change.

Bailout: how React skips work. Not every component in a re-rendering subtree actually re-runs. When React reaches a fiber during render, it checks: did props change (by Object.is on each prop)? did state change? is there a pending context update this fiber consumes? If none of these is true, React bails out — it clones the fiber from the alternate, reuses the entire existing child subtree by reference, and does not call the component function at all.

This is why referential stability matters so much: a child wrapped in React.memo bails out only if its props are referentially equal. Pass it an inline {} or an arrow function as a prop and the bailout fails every render, because a fresh literal is never Object.is-equal to the last one. useMemo and useCallback exist to preserve those references so the bailout can fire.

The mental model: re-rendering a parent does not automatically re-render children — it offers them the chance to bail out, and stable references are what let them take it.

State is stored on the fiber, not the component. A function component has no instance — it is just a function React calls. So where does useState keep its value across renders? On the fiber. Each fiber holds a linked list of hook records, one per useState/useReducer/useEffect call, in call order. React advances a cursor through that list as your component calls hooks.

This is the deep reason for the Rules of Hooks: hooks must be called unconditionally and in the same order every render, because React identifies each hook purely by its position in the call sequence, not by any name. Put a useState behind an if and on the render where the condition flips, every subsequent hook reads the wrong record. It also explains state preservation: state survives a re-render because the fiber survives; state is destroyed when the fiber is destroyed — which happens on unmount, on a type change, or on a key change.

Tearing and useSyncExternalStore. Interruptible rendering introduces a hazard called tearing: if an external store changes between two time-slices, the first slice’s components saw the old value and the later slice’s components see the new one, so the committed UI is internally inconsistent — “torn”. React’s own state cannot tear because React controls when it changes; external stores can, because React does not.

useSyncExternalStore fixes this: it gives React a subscribe function and a getSnapshot function. React reads the snapshot, and if it detects the snapshot changed during the concurrent render, it restarts the render, guaranteeing every component in one commit observed the same store value. Any state library integrating with React 18 (Redux, Zustand, Jotai) routes through useSyncExternalStore for this reason.