Prop drilling vs Context — couriers vs the broadcast tower
Feel the user prop march through components that never use it, then watch one Provider make the chain disappear.
💡
THE BIG IDEA
The user lives in App. A badge four levels down needs it. Act 1 does what every beginner does — pass it through everyone in between — and makes you feel exactly why that hurts. Act 2 raises a Context Provider and the middle components stop carrying parcels that were never theirs. The honest fine print about re-renders is included, because context solves WIRING, not performance.
Press ▶ Play to watch it run step by step, or use the arrow buttons to go at your own pace.
1
ACT 1 — the problem. App owns the user. UserBadge, three components away, needs to display it. How does it get there?
The obvious answer: pass it down. Watch what that costs.