What are React rendering optimizations beyond React.memo?

Why Interviewers Ask This

Advanced questions like this reveal whether a candidate has internalized React.js deeply enough to make architectural decisions. Strong answers demonstrate both breadth and depth of experience.

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.

Pro Tip

Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React.js answers easy to follow.