Why your React app re-renders too much (and how to find out)

When does React re-render a component?

When its own state or a reducer updates, when its parent re-renders, or when a context it subscribes to changes value.

Note what is not on that list: prop values changing. A child re-renders because its parent re-rendered, whether or not the props it received are different. React re-runs the function and diffs the output; only actual DOM differences reach the browser.

This matters because it reframes the problem. The question is not 'how do I stop this component re-rendering' but 'why is a component this expensive running this often'.

How do you measure it?

1. 1Install React DevTools and open the Profiler tab. Record the interaction that feels slow.
2. 2Enable 'Highlight updates when components render' to see the blast radius of each keystroke or click.
3. 3In the flame graph, look for wide bars — components taking milliseconds, not the count of renders.
4. 4Use the 'Why did this render?' panel to see whether it was state, props or a hook.
5. 5Confirm against a production build; development mode double-invokes renders in StrictMode and is not representative.

Fix one: move state down

The most common structural mistake is a piece of state used by one small component sitting in a page-level parent. Every keystroke in a search box then re-renders the entire page tree.

// Before: query lives at the top, whole page re-renders per keystroke
function Page() {
  const [query, setQuery] = useState("");
  return (
    <>
      <ExpensiveChart />
      <SearchInput value={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

// After: state lives with the components that use it
function Page() {
  return (
    <>
      <ExpensiveChart />
      <SearchPanel />   {/* owns query, re-renders alone */}
    </>
  );
}

Fix two: split your contexts

A context provider re-renders every consumer whenever its value changes identity. Bundling a user object, a theme, and a frequently-updating cart total into one context guarantees that a cart update re-renders every themed component in the app.

• One context per concern, and split stable data from frequently-changing data.
• Separate state and dispatch into two contexts — components that only dispatch never re-render.
• Memoise the provider value so it does not get a new identity on every parent render.
• For high-frequency values (mouse position, scroll offset), skip context entirely and use a subscription store.

Fix three and four: stabilise props, then memoise

React.memo compares props shallowly. Passing an inline object or arrow function creates a new reference on every render, so the memoised child re-renders anyway and you have paid for the comparison. Stabilise first with useCallback and useMemo, then wrap the component.

With the React Compiler now available, much of this memoisation can be applied automatically at build time. That does not remove the need to place state well — the compiler optimises what you wrote, it does not restructure your component tree for you.