What are React rendering optimizations beyond React.memo?

Answer

Beyond React.memo, several advanced techniques optimize React rendering. (1) State colocation: keep state as close to where it is used as possible — state at a high level means more components re-render on each update. Moving state down reduces the affected subtree. (2) Component composition with children: instead of rendering children inside a component that changes frequently, pass them as children prop from a stable parent — they do not re-render when the wrapper re-renders. (3) useMemo for expensive computations within render. (4) Virtualization for long lists (react-window, react-virtual, TanStack Virtual) — render only visible items, not the entire list. (5) Splitting providers: separate frequently-changing context from stable context. (6) Lazy initialization of state: useState(() => expensiveComputation()) — only runs once. (7) Transition API (useTransition) to deprioritize expensive renders. (8) useDeferredValue to prevent blocking renders. (9) Web Workers for truly CPU-intensive tasks (via Comlink or similar). (10) Server Components (Next.js App Router) — move static rendering to the server entirely.