React Internals & Rendering Pipeline
What actually happens when you call setState. Fiber nodes, the reconciliation work loop, memoization tradeoffs, stale closure bugs, concurrent rendering with time slicing, Suspense data flow, and how React's rendering pipeline maps onto the browser's.
Why React abandoned the stack reconciler for Fiber, how Fiber nodes form a linked-list tree, the work loop that powers rendering, and the priority lane system that makes concurrent rendering possible.
How React's O(n) diffing algorithm works — the heuristics that make it fast, how keys drive list reconciliation, and the two-phase render-then-commit architecture that keeps the DOM consistent.
Why React re-renders children when parents re-render, how React.memo uses shallow comparison to skip unnecessary renders, when memoization helps vs hurts, and the referential equality traps that silently break your optimizations.
The real costs of useCallback and useMemo — closure allocation, dependency comparison, memory pressure — and the specific scenarios where they actually improve performance vs where they add overhead for zero benefit.
Why hooks capture values from the render they were created in, how stale closures cause subtle bugs in intervals, event listeners, and async callbacks, and the patterns that fix them — dependency arrays, refs, and the ref-latest pattern.
How React breaks rendering into interruptible chunks, yields to the browser every 5ms, assigns priority lanes to updates, and uses useTransition and useDeferredValue to keep the UI responsive during expensive renders.
How Suspense works under the hood — thrown promises as the mechanism, fallback rendering, nested boundaries, streaming SSR, React.lazy, and the waterfall problem that naive Suspense usage creates.
How React's render-reconcile-commit pipeline maps onto the browser's JS-Style-Layout-Paint-Composite pipeline, where React hands off to the browser, and how useLayoutEffect, useEffect, and concurrent rendering interact with browser frames.