Why Your React App Re-renders Too Much and How to Fix It

Every setState call triggers a re-render of the component AND all its children. Here is how to stop the cascade.

How to Detect Unnecessary Re-renders

Open React DevTools then go to Profiler then Record then Interact then Stop. Look for components that re-render but produce the same output.

Enable Highlight updates when components render in React DevTools settings to see re-renders visually.

Fix 1: Move State Down

If only one child needs the state, move it into that child instead of the parent.

// BAD — entire page re-renders on hover
function Page() {
  const [hovered, setHovered] = useState(false);
  return (
    <>
      <ExpensiveHeader />
      <Button onHover={setHovered} hovered={hovered} />
      <ExpensiveFooter />
    </>
  );
}

// GOOD — only HoverButton re-renders function Page() { return ( <> ); } ```

Fix 2: Lift Content Up (Children Pattern)

Pass expensive components as children so they do not re-render.

Fix 3: Avoid Creating Objects and Arrays in Render

// BAD — new object every render breaks memo
<UserCard style={{ marginTop: 10 }} />

// GOOD — stable reference const cardStyle = { marginTop: 10 }; ```

Fix 4: Split Context

Do not put everything in one context. Split into separate contexts so consumers only re-render for data they actually use.

Profile before optimizing. Most re-renders are harmless. Fix the expensive ones.

See our React development services.