react-render-optimization

Start by computing derived values during render instead of storing them in state, subscribe to coarse-grained state like booleans rather than raw values, and extract expensive subtrees into memoized components. These high-impact patterns eliminate most wasted renders before micro-optimizations.

Use a plain const for cheap derivations like boolean flags, string formatting, and property access. Reserve useMemo for work that iterates or transforms data, such as filtering arrays, sorting, or JSON.parse, where recomputation cost is real.

useTransition wraps a state update you control, marking it as non-urgent so urgent updates stay responsive. useDeferredValue wraps a value coming from props or a parent you do not control, deferring re-renders of components that consume it.

React Compiler auto-memoizes expressions and components, making manual useMemo, useCallback, and memo calls largely unnecessary. However, patterns like extracting components for early returns and avoiding components defined inside components remain valuable.

Defining a component inside another creates a new component type on every render, forcing React to unmount and remount the entire subtree. This loses all state and DOM nodes; always define components at module scope.

Apply CSS content-visibility: auto with contain-intrinsic-size to list items so the browser skips layout and paint for off-screen content, giving 5-10x faster initial render. Combine with virtualization libraries like react-window for very large lists.