What Causes a Re-render?

The plain-language idea

A component re-renders for exactly one of these reasons:

1. Its own state changed (useState/useReducer setter called with a genuinely new value).
2. Its parent re-rendered, which by default re-renders every child too — regardless of whether that child's own props actually changed.
3. A context it consumes changed (a new value from the nearest Provider above it).

That's the whole list. Notably: a prop changing isn't its own separate cause — it's a consequence of reason 2 (the parent re-rendered and passed something different this time).

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ExpensiveChild />   {/* re-renders every time count changes — even though it uses no props at all */}
    </div>
  );
}

ExpensiveChild takes no props and reads no state — yet it re-renders on every click, purely because reason 2 applies: its parent re-rendered. This is default, expected React behavior, not a bug — React.memo (from the memoization lesson) is the tool that opts a component out of reason 2 specifically, by adding a shallow props comparison before deciding whether to actually re-render.

A component re-renders for exactly one of three reasons — nothing else triggers it.

BackNext

What people usually miss

Watch out

• "Nothing about this component changed, why did it re-render?" is almost always reason 2 — the parent re-rendered, and by default every descendant follows along, whether or not its own inputs changed.
• A re-render is not automatically expensive. React's diffing (reconciliation) is fast; the actual cost is usually the component's own render-time work (heavy computation, large lists) — profile before reaching for React.memo everywhere as a reflex.
• Context changes re-render every consumer, regardless of parent/child relationships — a component nowhere near the Provider in the render order still re-renders if it calls useContext on a Provider whose value changed.

Why this matters in interviews

"What causes a React component to re-render?" is a foundational question that a surprising number of candidates answer incompletely (usually forgetting reason 2) — getting the full, precise list right is what makes every later performance discussion (memo, useMemo, useCallback) make sense.