Bonus: children don't re-render when the wrapper's own state changes
Clicking changes Card's own state, so Card renders again. LessonList doesn't: the element in children was made by App, which didn't render, so React sees the same element and skips it.
Prop drilling is passing a prop through components that don't use it, only so a component deep below can read it; it's fine for two or three levels, and when it gets painful the first fix is composition: pass finished JSX down as children instead of the raw data.
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 Dashboard passes currency through Panel and Row to Price. Neither Panel nor Row uses it. Rewrite it with composition so Panel and Row don't mention currency.
Write a Layout component with header, sidebar and children slots, and use it from App with a user that only the header shows.
Explain it without notes
What is prop drilling, and when is it not a problem?
How does composition with children remove prop drilling? Give an example.
Why doesn't a component passed as children re-render when the wrapper's own state changes?
What order of solutions would you try for sharing data deep in a tree?
Preview
Console
Nothing logged yet.Expected console output
Card rendered, highlight = false
LessonList rendered
--- click Highlight
Card rendered, highlight = true