React Re-Renders: When and Why Components Update

Jun 15, 2026 · 9 min read

"Why did my component re-render?" is one of the most common React questions. A solid mental model makes the answer obvious and makes performance work far less mysterious.

What triggers a re-render

A component re-renders when:

its state changes (a setter is called),
its parent re-renders, or
a context it consumes changes.

That second one surprises people: by default, when a component re-renders, all of its children re-render too — whether or not their props changed.

Re-render does not mean DOM update

"Re-render" means React calls your component function again to compute the new UI. It then compares the result to the previous one and only touches the real DOM where something actually changed. So a re-render is usually cheap — the expensive part is touching the DOM, which React minimises for you.

Keeping re-renders from cascading

Most apps never need optimisation. When a re-render is genuinely expensive, you have options:

// Skip re-rendering when props are unchanged
const Row = React.memo(function Row({ item }) {
  return <li>{item.name}</li>;
});

React.memo lets a component skip re-rendering if its props are the same as last time. For it to help, the props must actually be stable — which is where useMemo and useCallback come in for objects and functions.

Structure beats memoization

Often the cleanest fix is moving state down (so fewer components depend on it) or passing children through as a prop so they aren't re-created. Reach for structural fixes before sprinkling memoization everywhere.

Key takeaways

State change, parent re-render, or context change cause re-renders.
Children re-render with their parent by default.
Re-rendering is cheap; DOM updates are what React minimises.
Fix expensive trees with structure first, memoization second.

Want the structured path? Explore the React roadmap or browse more articles.