Performance

13 examples to get you started with React Performance -- 9 basic and 4 intermediate.

Find and stop unnecessary re-renders that make typing, scrolling, and tab switching feel sluggish.

Apply useMemo, useCallback, and React.memo after profiling to cut expensive recomputes and re-renders.

Let the React Compiler auto-memoize your components, removing manual useMemo, useCallback, and memo.

Measure render cost with the React DevTools Profiler before optimizing, so you fix the real bottleneck.

Detect and fix React memory leaks — orphaned timers, event listeners, useEffect cleanup, observers, and retained references in DevTools.

Shrink JavaScript payloads with code splitting, tree shaking, and dependency audits to hit load-time budgets.

Server Component performance in Next.js 15 — payload size, the client boundary, streaming, parallel data fetching, and avoiding RSC waterfalls.

React Suspense and Next.js streaming performance — boundary placement, loading.tsx, request waterfalls, and progressive rendering patterns.

Image and font performance for React and Next.js — next/image priority and sizes, font-display, preloading, and CLS prevention.

Optimize LCP, INP, and CLS in React and Next.js apps with practical patterns for images, fonts, layout stability, and main-thread work.

State management performance in React — context re-renders, selector libraries, useTransition, useDeferredValue, and store splitting strategies.

Speed up React data fetching with parallel requests, caching, request deduplication, Suspense waterfalls, and Next.js fetch options.

Next.js 15 caching deep dive — fetch cache, route cache, full route cache, data cache, revalidatePath, revalidateTag, and dynamic rendering.

React and Next.js performance audit checklist covering rendering, data fetching, bundle size, caching, and Core Web Vitals.

A condensed summary of the 25 most important best practices drawn from every page in this section.