Performance Optimization

Introduction

React is fast by default for the vast majority of apps, and most components never need any special performance treatment at all. But as an app grows — more components, bigger lists, more frequent state updates — it is common to eventually run into a screen that feels sluggish. This lesson is about recognizing why that happens and knowing which tool actually fixes it.

You have already met several performance-related tools across earlier lessons in isolation: React.memo, useMemo, useCallback, and code splitting with lazy loading. This lesson ties them together into a single mental model, adds list virtualization as one more technique, and — most importantly — establishes the habit of measuring before reaching for any of them.

Why Components Re-Render

A React component re-renders whenever its state changes, whenever its parent re-renders (by default, regardless of whether the props actually changed), or whenever context it subscribes to changes. Re-rendering itself is cheap for most components — it is just running the function again and diffing the result. Performance problems show up when a re-render is expensive (heavy computation, a huge list) and happens far more often than necessary.

Recap: The Optimization Toolkit

Each of these tools targets a different cause of wasted work. Knowing which problem each one solves matters more than memorizing the syntax.

Example: Memoizing an Expensive List

Consider a parent that re-renders frequently (say, on every keystroke in an unrelated search box) alongside a child that renders a large, computationally expensive list. Without memoization, that list recalculates and re-renders on every keystroke, even though its own data has not changed.

function Dashboard() {
  const [search, setSearch] = useState("");
  const items = useProductList(); // large array

  return (
    <div>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <ExpensiveList items={items} />
    </div>
  );
}

function ExpensiveList({ items }) {
  const sorted = items.slice().sort(expensiveCompare);
  return (
    <ul>
      {sorted.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  const sorted = useMemo(() => items.slice().sort(expensiveCompare), [items]);
  return (
    <ul>
      {sorted.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

Typing in the search box no longer re-sorts or re-renders ExpensiveList,
because its "items" prop reference has not changed.

Virtualizing Long Lists

Memoization helps avoid unnecessary re-renders, but a list with thousands of rows is expensive to render even once, since React still has to create and manage a DOM node for every single item. Virtualization solves this differently: instead of rendering every row, it only renders the handful of rows currently visible in the scrollable viewport, recycling DOM nodes as the user scrolls.

import { FixedSizeList } from "react-window";

function Row({ index, style, data }) {
  return <div style={style}>{data[index].name}</div>;
}

function VirtualizedList({ items }) {
  return (
    <FixedSizeList height={400} width={300} itemCount={items.length} itemSize={35} itemData={items}>
      {Row}
    </FixedSizeList>
  );
}

Measure Before You Optimize

It is tempting to sprinkle React.memo and useMemo everywhere "just in case," but every one of these tools has a small cost of its own (extra memory for cached values, extra comparison work), and applying them to a component that was never actually slow can make code harder to read for no benefit.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Performance optimization in React is less about memorizing a list of tricks and more about understanding why a re-render happened and whether it was actually expensive. React.memo, useMemo, useCallback, code splitting, and virtualization each address a specific cause, but none of them replace the discipline of measuring first.

In this lesson, you reviewed why components re-render, tied together the optimization tools from earlier lessons, and learned when virtualization is worth the complexity. Next, you will learn to use the React Developer Tools browser extension to actually inspect components and profile renders — the measuring step this lesson has been pointing toward.