What causes a React component to re-render?
A component re-renders when its own state changes, when its parent re-renders, or when a context it reads changes. Changing a prop value does not itself trigger it; the parent re-rendering does. Plain variables and refs never cause a render.
Explain it simply
Think of a class teacher who re-reads the whole attendance register every time one student's status changes. Re-rendering is React calling your component function again to get fresh JSX.
Three triggers. One, the component's own state changed through a setter. Two, its parent re-rendered, and by default every child re-renders with it, even if the props are identical. Three, a context value it consumes changed.
Re-rendering is not the same as updating the DOM. React compares the new JSX with the old and touches the real DOM only where something differs. A render that produces the same output is cheap, which is why most apps do not need memoisation until a profiler shows a problem.
Example
function Parent() {
const [n, setN] = useState(0);
return (
<>
<button onClick={() => setN(n + 1)}>{n}</button>
<Child /> {/* re-renders on every click, even without props */}
</>
);
}Wrapping Child in React.memo makes React skip it when its props are equal.
What to say in the interview
"A component re-renders when its state changes, when its parent renders, or when a consumed context changes. Re-rendering means calling the function again; React then diffs the output and only updates DOM nodes that changed. I optimise only after profiling, using memo, state colocation or splitting components."
Common mistakes
- Believing a re-render always rewrites the DOM.