Context vs Prop Drilling: I Put the Re-render Blast Radius Side by Side

"Prop drilling is bad, use Context" is repeated everywhere — but the actual cost stays abstract. So I put the two approaches side by side with live render counters. Click one button and the difference is impossible to miss. ▶ Live demo: https://context-vs-props-drilling.vercel.app/ Source (React 19 + TS): https://github.com/dev48v/context-vs-props-drilling Two identical 4-level trees, both React.memo 'd. One threads a value down as a prop through every level; the other provides it once via Context and reads it only at the leaf. Change the value: Prop drilling → 4 components re-render. Every component on the path receives the changed prop, so all of them re-render — and each intermediate is cluttered with a value it does nothing with except pass along. Context → 1 component re-renders. The intermediates take no value prop, so they're skipped (memoized, props unchanged). Only the consumer leaf re-renders. The summary tallies it on every click: 4 vs 1 . Why Context skips the middle This is the part that surprises people: with Context, an intermediate component can be skipped even though a descendant re-renders . < ThemeCtx . Provider value = { val } > < A /> { /* memo, no props → skipped on value change */ } </ ThemeCtx . Provider > const A = memo (() => < B />); // skipped const B = memo (() => < C />); // skipped const C = memo (() => < Leaf />); // skipped const Leaf = () => { const value = useContext ( ThemeCtx ); // ← re-renders on context change return < div > { value } </ div >; }; React re-renders context consumers directly when the provider value changes — it doesn't need to re-render the components in between. With prop drilling there's no such shortcut: the only way the value reaches the leaf is through every parent, so every parent must re-render. The catch — Context isn't a free lunch Context isn't a "no re-renders" button. Every consumer re-renders whenever the provider value changes — there's no built-in selective subscription. One big, chatty context ca