React Hooks Deep Dive
Hooks internals and production patterns. How hooks are stored, the stale closure problem, when to memoize, and the correct patterns for every built-in hook.
Hooks are stored as a linked list on the Fiber node. This internal structure is why you cannot call hooks conditionally, in loops, or in nested functions. Understanding the storage model makes the Rules of Hooks intuitive.
useState is implemented as useReducer with a basic reducer. State updates go through a queue, are compared with Object.is, and can be bypassed with functional updaters. Master the internals and common batching traps.
useReducer shines when state transitions follow defined rules, when multiple state values update together, or when the next state depends on the previous in complex ways. dispatch is referentially stable — a hidden performance advantage.
The effect lifecycle, cleanup timing, dependency array gotchas, and the patterns that prevent infinite loops, race conditions, and memory leaks in production.
useRef is not just for DOM elements. It is a mutable container that persists across renders without triggering re-renders — essential for tracking previous values, managing intervals, counting renders, and escaping stale closures.
useMemo caches computed values. useCallback caches function references. Both exist for referential equality — not for making things faster by default. Premature memoization adds complexity without benefit.
useLayoutEffect runs synchronously after DOM mutations but before the browser paints. useEffect runs after paint. The timing difference matters for DOM measurement, scroll restoration, and preventing visual flicker.
useSyncExternalStore safely subscribes React components to external data sources — browser APIs, third-party stores, global variables — without tearing in concurrent rendering.
Closures capture values at the time of creation. In React, this means event handlers and effects can see old state. Understanding why closures go stale — and how to escape — prevents the most confusing React bugs.
Extract reusable logic into custom hooks. Composition over configuration. Hook naming conventions, return value patterns, and the design decisions that make hooks easy or painful to use.
8 dependency array questions that test whether you truly understand how React tracks effect dependencies, stale closures, and referential equality. These are the bugs that waste hours in production.