What exactly triggers a component to re-render?
Quick answer
Three things: its own state changes, its parent re-renders, or a context it consumes changes. Props changing on their own is not a separate trigger.
In detail
A component re-renders when a state setter is called, when its parent re-renders (by default children re-render too), or when a consumed context value changes. Props 'changing' is really a consequence of the parent rendering and passing new ones. Re-rendering means React calls the function again — it does not necessarily change the DOM, since reconciliation only commits real differences.
1function App() {
2 const [n, setN] = useState(0);
3 return (
4 <>
5 <button onClick={() => setN(n + 1)}>{n}</button>
6 <Child /> {/* re-renders when App does, even with no props */}
7 </>
8 );
9}Why interviewers ask this: Foundational for any performance discussion.
Common follow-up questions
- →How do you stop a child re-rendering unnecessarily?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399