Prop drilling: the user passes through two components that don't use it
Three components touch user; only one uses it. Add a theme prop to UserMenu and you'd have to edit Page and Sidebar too.
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
Page got user only to pass it on
Sidebar got user only to pass it on
UserMenu uses user: Asha