React Performance Checklist: 26 Essential Steps

Record interactions in the React DevTools Profiler tab to see which components re-render and why. Focus on components that render frequently or take longer than 16ms. Do not optimize blindly — always profile first.

Move state to the lowest component that needs it. When state lives too high in the tree, every state change re-renders all children. Colocating state with the component that uses it is the simplest and most effective optimization.

Wrap components that receive the same props frequently with `React.memo`. This skips re-rendering when props have not changed. Most effective for list items, chart components, and complex UI sections that render often.

Wrap callback functions passed as props with `useCallback` to prevent child components wrapped in React.memo from re-rendering. Without useCallback, a new function reference is created every render, defeating memoization.

Expressions like `style={{ color: 'red' }}` or `options={[1, 2, 3]}` create new references every render, causing memoized children to re-render. Extract these to constants outside the component or memoize with useMemo.

A single context with multiple values (user, theme, locale) re-renders every consumer when any value changes. Split into separate contexts: UserContext, ThemeContext, LocaleContext. Each consumer only re-renders for the context it actually uses.

Wrap route components with `React.lazy(() => import('./Page'))`. Each route becomes a separate chunk downloaded only when the user navigates to it. This can reduce initial bundle size by 50-80% in multi-page apps.

Install `source-map-explorer` or `webpack-bundle-analyzer` and run against your production build. Identify dependencies over 50KB, duplicate packages loaded in different chunks, and code that should be lazy-loaded.

Common swaps: moment.js to date-fns or dayjs, lodash to lodash-es with individual imports, numeral.js to Intl.NumberFormat (built-in), classnames to clsx (smaller). Check bundlephobia.com before adding any dependency.

Use `React.lazy` for modals, drawers, charts, date pickers, rich text editors, and any component not visible on initial load. Wrap with `<Suspense fallback={<Skeleton />}>` to show a loading state during chunk download.

Use named imports (`import { debounce } from 'lodash-es'`) instead of default imports of entire modules. Verify tree shaking is working by checking your bundle analyzer output — dead code should not appear in production chunks.

In Zustand, use selectors: `useStore(state => state.count)` instead of `useStore()`. In Redux, use `useSelector` with specific state slices. Without selectors, components re-render on every store change, even unrelated ones.

Store relational data in flat, normalized structures with IDs as keys instead of deeply nested objects. Updating a nested object requires creating new references for every parent, causing widespread re-renders. Flat structures allow surgical updates.

React 18+ automatically batches state updates in event handlers, timeouts, and promises. For older versions or custom scheduling, use `ReactDOM.flushSync` sparingly and `unstable_batchedUpdates` for legacy code. Verify batching is active with the Profiler.

Wrap expensive state updates with `startTransition` to mark them as non-urgent. React will keep the UI responsive during the transition, showing the old UI until the new one is ready. Ideal for search filtering, tab switching, and data-heavy renders.

For search inputs, resize observers, and scroll handlers, debounce state updates with a 150-300ms delay. Each state update triggers a render cycle — rapid-fire updates from typing or scrolling can cause janky UI.

Use `@tanstack/react-virtual` or `react-window` for lists with 100+ items. Virtualization renders only visible rows (typically 10-20) instead of all items, reducing DOM nodes from thousands to dozens.

Always use unique, stable IDs as keys — never array indices. Index keys cause React to re-mount items when the list order changes (sorting, filtering, inserting), destroying component state and hurting performance.

Never load thousands of items at once. Use cursor-based pagination for predictable performance. For infinite scroll, use IntersectionObserver to trigger loading the next batch. Show skeleton loaders while data loads.

Wrap expensive filtering, sorting, or transformation logic with `useMemo`. This caches the result and only recomputes when dependencies change. Measure the computation cost first — memoization adds overhead and is only worth it for operations taking >1ms.

Reduce unnecessary wrapper divs and deeply nested component trees. Each DOM node costs memory and slows layout calculations. Use React Fragments (`<>...</>`) instead of wrapping divs. Aim for under 1500 total DOM nodes per page — pages exceeding 3000 nodes show measurable layout and paint delays.

Add `loading='lazy'` to all images that are not immediately visible. For more control, use IntersectionObserver to load images as they approach the viewport. This reduces initial page weight significantly on image-heavy pages.

Use TanStack Query or SWR to cache API responses and avoid redundant network requests. Configure staleTime and gcTime to control cache freshness. These libraries handle refetching, deduplication, and background updates automatically.

Add `<link rel='preload'>` for fonts, hero images, and critical CSS. Use `<link rel='prefetch'>` for resources needed on the next likely page. Preloading starts the download before the rendering code requests the resource.

Convert images to WebP (30% smaller than JPEG) or AVIF (50% smaller). Use `<picture>` element with format fallbacks for browser compatibility. If using a CDN like Cloudinary or imgix, enable automatic format negotiation.

Configure your web server or CDN to compress responses with Brotli (preferred) or gzip. Brotli achieves 15-25% better compression than gzip. Verify compression is active using Chrome DevTools Network tab — check the Content-Encoding header.