Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
React prop drilling ke bina component tree mein values kaise propagate karta hai.
Context API aapko component tree mein data share karne deta hai bina har level par props pass kiye (prop drilling). Ek Provider component ek subtree wrap karta hai aur ek value provide karta hai. Koi bhi descendant component useContext se woh value access kar sakta hai â aur jab value change hoti hai toh automatically re-render hota hai.
React.createContext(defaultValue) ek Context object banata hai jisme Provider aur Consumer hote hain. defaultValue tab use hoti hai jab koi component tree mein koi matching Provider upar na ho.
Provider component ek value prop accept karta hai. Subtree ke saare components yeh value access kar sakte hain. Aap same context ke multiple Providers nest kar sakte hain â nearest ancestor Provider jeet ta hai.
useContext(MyContext) calling component ke upar wale nearest Provider se current context value return karta hai. Yeh component ko context changes ke liye subscribe kar deta hai.
Jab Provider ka value prop change hota hai (by reference), React subtree mein saare components jo useContext(MyContext) call karte hain unhe re-render karta hai â chahe unka consumed value actually change hua ho ya nahi.
Yahi key efficiency hai: intermediate components jo useContext call nahi karte woh re-render nahi hote. Context unhe skip kar deta hai. Sirf actual consumers ko re-render milta hai.
Ek context object banata hai. Ek default value leta hai jo tab use hoti hai jab tree mein consumer ke upar koi Provider na ho.
Saare descendant consumers ko ek value broadcast karta hai. Nested Providers baahri wale ko override karte hain. Value ko unnecessary re-renders rokne ke liye memoize karo.
Hook jo ek component ko context subscribe karta hai. Jab bhi context value change hoti hai re-render hota hai.
Context seedha consumers tak pahunchta hai â intermediate components re-render nahi hote jab tak woh bhi useContext call na karein.
React context values ko Object.is() se compare karta hai. Har render par ek naya object literal '{''}' pass karne se saare consumers re-render hote hain chahe contents same hon.
1const ThemeContext = React.createContext('light'); // default23// Provider â wrap at the top level4function App() {5 const [theme, setTheme] = useState('dark');67 // â ïļ Memoize the value to avoid re-rendering all consumers8 // on every App render, even when theme hasn't changed9 const value = useMemo(() => ({ theme, setTheme }), [theme]);1011 return (12 <ThemeContext.Provider value={value}>13 <Layout />14 </ThemeContext.Provider>15 );16}1718// Consumer â anywhere in the subtree19function Button() {20 const { theme } = useContext(ThemeContext);21 return <button className={theme}>Click</button>;22}
Context prop drilling solve karta hai â deeply nested child tak data pahunchane ke liye kai component layers se props pass karna. Lekin context truly global ya widely-shared data ke liye best hai (auth, theme, locale). Frequently-changing values ke liye, har change par saare consumers re-render karne se bachne ke liye Zustand ya Redux prefer karein.
Your app has a global theme context providing colors, fonts, and dark/light mode. After adding it, every keystroke in a form input re-renders the entire app because the ThemeProvider is at the root.
The context value is `{ theme, toggleTheme }`. If the ThemeProvider's parent re-renders for ANY reason (new route, state change), a new object is created â all consumers re-render. With 50+ themed components, every parent re-render triggers 50+ unnecessary re-renders.
Split into two contexts: `ThemeValueContext` (read-only, changes only on toggle) and `ThemeDispatchContext` (stable setter function). Components that only READ the theme subscribe to ThemeValueContext. Components that only TOGGLE subscribe to ThemeDispatchContext. Memoize both values with useMemo.
Takeaway: Split contexts by update frequency: separate rarely-changing data (theme colors) from frequently-changing data (user input). This prevents the 'context-triggers-everything' problem and is the pattern used by Redux, Zustand, and Jotai internally.
A settings page passes `locale`, `currency`, and `dateFormat` through 6 levels of nesting: Settings â Layout â Panel â Section â Field â Label. Adding a new preference requires editing 6 components.
Prop drilling creates tight coupling â every intermediate component must know about and forward props it doesn't use. Adding, renaming, or removing a preference requires changing every component in the chain. The intermediate components also re-render when props change even though they don't USE the data.
Create a `PreferencesContext` and consume it directly in Label with `useContext(PreferencesContext)`. Intermediate components (Layout, Panel, Section, Field) don't receive or forward preference props. The preferences data 'teleports' from Provider to consumer, skipping all intermediate components.
Takeaway: Context eliminates prop drilling for cross-cutting concerns (theme, auth, locale, feature flags). Use it when data needs to be available deep in the tree and passing it through 3+ levels of components that don't use it. For frequently-updating state, consider a state manager instead.