The three reasons, logged
Add one: App and both children render (reason 1, then reason 2). The first "same value" click calls App once more and throws the result away, without rendering the children. The second is skipped entirely.
A component renders again for three reasons only: its own state changed, its parent rendered, or a context it reads changed; rendering means calling your function, which is cheap, and React touches the DOM only where the result is different.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A Clock component in the header owns a time state that updates every second, and the header also renders a slow Menu. Restructure it so Menu doesn't re-render every second, without memo.
Predict the logs when a button calls setName("Asha") and name is already "Asha", in a component that has never updated before.
Explain it without notes
What are the three reasons a React component re-renders?
Why doesn't a re-render always mean a DOM update?
A component reads a context and its parent is wrapped in memo. The context value changes. What happens?
Why does React re-render children even when their props are unchanged?
Preview
Console
Nothing logged yet.Expected console output
App rendered
Title rendered
Display rendered, count = 0
--- click Add one
App rendered
Title rendered
Display rendered, count = 1
--- click Set the same value
App rendered
--- click Set the same value again