Performance Optimization

Why React can be slow:

• Every state update re-renders entire subtree.
• Diffing has O(n) cost per render.
• Many components, many re-renders.

Optimizations:

Memoization:

Skip render if props haven't changed (shallow compare by default).

useMemo:

Cache value across renders. Re-compute only if deps change.

useCallback:

Stable function reference. Prevents children memoized on this prop from re-rendering.

Lazy components:

Code-split. Load on demand.

Virtualization:

• For long lists (1000+ items): only render visible.
• Libraries: react-virtualized, react-window, TanStack Virtual.

Avoid inline objects in props:

Profiling:

• React DevTools Profiler.
• Why did this render? (Records render reason).
• Flame graph of render times.

Concurrent React (React 18+):

• Render in chunks; yield to browser.
• Suspense for streaming data.
• useTransition / useDeferredValue: mark updates as low-priority.

Server Components:

• Render on server; only ship HTML + interactivity bundle.
• Reduces JS bundle size dramatically.
• Next.js 13+ uses by default.

Other frameworks:

• Solid: no virtual DOM. Tracks fine-grained reactivity at compile time. Updates only the specific DOM node.
• Svelte: compile-time framework. No runtime overhead.
• Qwik: resumable hydration; tiny initial JS.

Modern JS is full of optimizations. The biggest wins come from architecture (data flow), not from micro-optimizing renders.

Don't optimize prematurely. Profile first.