React Context vs Prop Drilling: How Re-render Counts Differ in Practice

A developer has built an interactive demo comparing React Context and prop drilling across identical 4-level component trees, both using React.memo. The experiment shows that updating a value via prop drilling triggers re-renders in all 4 components along the path, while using Context re-renders only the single leaf consumer. This happens because React delivers context updates directly to consumers, bypassing intermediate components whose props remain unchanged. However, the author cautions that Context is not a universal fix — poorly structured or frequently changing contexts can cause excessive re-renders across all consumers. Best practices highlighted include splitting contexts by update frequency, memoizing provider values, and using selector-based libraries like Zustand for partial subscriptions.