React Performance

React is fast by default for most UIs. Performance optimization should be driven by measurement, not assumption. This lesson covers the tools React provides, when they genuinely help, and — equally important — when applying them is premature or actively harmful.

Why React Re-renders

React re-renders a component when:

1. Its state changes
2. Its parent re-renders (and props may have changed)
3. A context value it reads changes

Most of the time this is fine — renders are cheap. The optimization tools below prevent renders that are provably unnecessary.

React.memo

React.memo wraps a component and skips re-rendering it if its props haven’t changed (using shallow comparison).

type BadgeProps = { count: number; label: string };

// Without memo: re-renders whenever parent re-renders, even if count and label haven't changed
const Badge = ({ count, label }: BadgeProps) => (
  <span>{label}: {count}</span>
);

// With memo: skips render if count and label are the same references/values
const MemoizedBadge = React.memo(({ count, label }: BadgeProps) => (
  <span>{label}: {count}</span>
));

useMemo

useMemo memoizes the result of an expensive computation, recalculating only when its dependencies change.

function ProductList({ products, filterText }: { products: Product[]; filterText: string }) {
  // Without useMemo: filters on every render
  const filtered = products.filter(p => p.name.includes(filterText));

  // With useMemo: only re-filters when products or filterText changes
  const filteredMemo = useMemo(
    () => products.filter(p => p.name.includes(filterText)),
    [products, filterText]
  );
}

When to use: filtering/sorting large arrays, expensive mathematical computations, creating stable object references for memoized children or context values.

When not to use: for cheap operations (string concatenation, simple arithmetic), or as a default for all computed values. The memoization itself has a cost.

useCallback

useCallback memoizes a function reference, returning the same function object between renders unless dependencies change.

function Parent() {
  const [count, setCount] = useState(0);

  // Without useCallback: new function reference every render → MemoizedChild always re-renders
  const handleClick = () => console.log("clicked");

  // With useCallback: stable reference → MemoizedChild skips re-render when count changes
  const stableHandleClick = useCallback(() => console.log("clicked"), []);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <MemoizedChild onClick={stableHandleClick} />
    </>
  );
}

The Premature Optimization Trap

// Unnecessary: the computation is trivial
const doubled = useMemo(() => count * 2, [count]);

// Unnecessary: nothing reads this reference for memoization purposes
const handleChange = useCallback((e) => setName(e.target.value), []);

Adding useMemo and useCallback everywhere:

• Clutters the code with dependency arrays that must be maintained
• Costs memory for the cached values and dependency comparisons
• Can hide real performance problems by masking them instead of fixing root causes

Profile first. Optimize second.

Code Splitting with React.lazy and Suspense

Splitting your bundle into chunks loaded on demand reduces initial page load time.

import { lazy, Suspense } from "react";

// The component and its dependencies are in a separate chunk
const HeavyDashboard = lazy(() => import("./HeavyDashboard"));

function App() {
  const [showDashboard, setShowDashboard] = useState(false);

  return (
    <>
      <button onClick={() => setShowDashboard(true)}>Open Dashboard</button>
      {showDashboard && (
        <Suspense fallback={<div>Loading dashboard...</div>}>
          <HeavyDashboard />
        </Suspense>
      )}
    </>
  );
}

React.lazy works with dynamic import(). The Suspense boundary catches the loading state while the chunk downloads and renders the fallback in its place.

Profiling with React DevTools

The React DevTools browser extension includes a Profiler tab that records renders and shows:

• Which components rendered and why (“why did this render?”)
• How long each render took
• The render count for each component during a recording

Workflow:

1. Open DevTools → Profiler tab
2. Click “Record”
3. Interact with the slow part of your app
4. Stop recording
5. Inspect the flame chart — look for components that render unexpectedly often or take >16ms

Further Learning

Search these terms to go deeper:

• “Josh W. Comeau understanding useMemo and useCallback” — the most thorough explanation of when these hooks genuinely help
• “React DevTools Profiler tutorial” — how to read flame charts and identify real bottlenecks
• “React.lazy Suspense code splitting react.dev” — official guide with router integration examples
• “Mark Erikson React rendering behavior” — deep dive into exactly when and why React renders
• “Million.js block virtual DOM” — an alternative reconciliation approach for extreme performance cases

React Performance

React is already fast for most apps. So the first rule of performance is: don’t optimize until you’ve measured a real problem. But it helps to know the tools React gives you and when they actually matter.

Why components re-draw

A component re-draws when:

1. Its own state changes.
2. Its parent re-draws.
3. A context it uses changes.

Usually this is totally fine — re-drawing is cheap. The tools below just prevent re-draws that are provably pointless.

The three optimization tools

• React.memo wraps a component so it skips re-drawing when its props haven’t changed.
• useMemo remembers the result of an expensive calculation, redoing it only when its inputs change:

const filtered = useMemo(
  () => products.filter(p => p.name.includes(query)),
  [products, query]  // only re-filter when these change
)

• useCallback is the same idea but for functions — it keeps a function from being freshly created every render (useful when passing it to a React.memo child).

Load less up front: code splitting

You can split heavy parts of your app into separate files that load only when needed, so the first page loads faster:

import { lazy, Suspense } from 'react'
const Dashboard = lazy(() => import('./Dashboard'))

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

Now Dashboard’s code only downloads when it’s actually shown. Doing this per-route (per page) is the biggest, easiest win.

Find real slowdowns with the Profiler

The React DevTools browser extension has a Profiler tab. Hit record, use the slow part of your app, stop, and it shows you which components re-drew and how long they took.

In one sentence

React is fast by default — measure first, then reach for React.memo/useMemo/useCallback only on proven hotspots, and use React.lazy + Suspense to load heavy pages on demand.

Want to go deeper?

Switch to Expert mode above for exactly when React.memo helps, useCallback with memoized children, and reading Profiler flame charts.