A Practical Guide to React Performance

React is fast by default, until it isn't. The good news is that the vast majority of real-world performance issues trace back to a small set of patterns. Fix those, and you rarely need exotic optimizations.

Measure before you optimize

The first rule of performance work is to never guess. Use the React Profiler and the browser's performance panel to find what actually renders, and how often.

Avoid unnecessary re-renders

A re-render isn't inherently bad, but cascading re-renders of expensive subtrees are. The most common culprit is passing a freshly-created object or function on every render.

// ❌ A new array + handler every render breaks memoized children
function ProductList({ products }) {
  return (
    <List
      items={products.filter((p) => p.inStock)}
      onSelect={(id) => track(id)}
    />
  );
}

// ✅ Stabilize derived data and callbacks
function ProductList({ products }) {
  const inStock = useMemo(
    () => products.filter((p) => p.inStock),
    [products],
  );
  const handleSelect = useCallback((id) => track(id), []);

  return <List items={inStock} onSelect={handleSelect} />;
}

Memoize the right things

React.memo, useMemo and useCallback are tools for keeping referential identity stable across renders. Reach for them when:

• a child component is expensive to render, and
• it receives props that would otherwise change identity every render.

Better still, let the React Compiler handle memoization for you. Adding it is a single dependency:

npm install babel-plugin-react-compiler

Ship less JavaScript

The fastest code is the code you never send. Code-splitting and lazy loading keep the initial bundle small.

import { lazy, Suspense } from 'react';

const Editor = lazy(() => import('./Editor'));

export function Panel() {
  return (
    <Suspense fallback={<Spinner />}>
      <Editor />
    </Suspense>
  );
}

Move work to the server

With React Server Components, data fetching and heavy rendering can happen on the server, shipping only the resulting HTML and a minimal amount of client JS. The practical heuristic:

Optimize images and fonts

Images are usually the largest assets on a page. Use a real image pipeline (responsive sizes, modern formats, lazy loading) and load only the font weights you actually use.