React fiber: multiple-choice review
Multiple-choice synthesis across the fiber unit — render vs commit, the double-buffer tree, reconciliation keys, lanes and time-slicing, bailout, and tearing.
Six questions that cut across the whole unit. None is a definition to recite — each mirrors a decision you make in a real performance incident, where the render phase, the commit phase, keys, lanes, and the bailout all interact.
Confirm you can connect the reconciler’s two phases, the fiber double-buffer, reconciliation identity, the lane scheduler, and the bailout mechanism — the synthesis the individual lessons built toward.
A component increments a module-level counter in its function body. It worked in React 17; in React 18 StrictMode the counter is double what you expect, and in production under load it occasionally triple-counts. What is the root cause?
A render is 30 ms in when a higher-priority keystroke arrives. React abandons the in-progress workInProgress tree and starts over. Why does discarding the half-built tree cost nothing visible?
A list renders with key={index}. A checkbox checked on the third row stays checked on the wrong row after the first row is deleted, yet the text labels are all correct. What explains the split behaviour?
A search input filters a 5,000-row list. Typing is janky. You wrap the filtered-list setState in startTransition. Typing now feels instant — but why does the list itself not freeze the page when it finally renders?
A child wrapped in React.memo re-renders on every parent render. The Profiler reason is 'props changed', but the prop's contents are identical each time. What is happening?
An external store drives a dashboard. After enabling concurrent features, you occasionally see the header showing one total while a sibling panel shows a different total in the same frame. Which mechanism is at fault and what fixes it?
The unit’s through-line is one machine seen from six angles: render computes the diff (interruptible, must be pure) and commit applies it (atomic); the fiber double-buffer makes interruption free; reconciliation keys bind state to identity, not position; lanes and time-slicing keep urgent input ahead of expensive work; the bailout — gated by Object.is referential stability — keeps large trees cheap; and useSyncExternalStore keeps external stores from tearing under concurrent rendering. Every production symptom here resolves back to one of those six levers.
Something unclear?
Ask a question about this lesson. Questions are anonymous and go straight to the author to make the lesson better.