Context reaches past memo, and rendering isn't DOM work
Toggling the theme skips Toolbar (memo, no props changed) but ThemedButton still renders: it reads the context. App rendered three times, yet the static <p> was never touched in the DOM. <ThemeContext value> as a provider is React 19 syntax (Topic 9.2).
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
Toolbar rendered
ThemedButton rendered with light
--- toggle theme
App rendered
ThemedButton rendered with dark
--- change other state
App rendered
DOM changes inside the static <p>: 0