useContext Hook
"Prop drilling" EK, PROBLEM hai — JAB, DATA, KO, DEEPLY, NESTED, COMPONENT, TAK, PAHUNCHANE, KE, LIYE, INTERMEDIATE, COMPONENTS, SE, MANUALLY, PROPS, PASS, KARNI, PADТI, HAI, CHAHE, WOH, INTERMEDIATE, COMPONENTS, KO, USKI, ZAROORAT, NA, HO. Context API, ISE, SOLVE, KARTI, hai.
createContext(), EK, Context, OBJECT, BANATA, hai. Provider, VALUE, "BROADCAST" KARTA, hai, POORE, SUBTREE, MEIN. useContext(MyContext), KISI, BHI, DESCENDANT, COMPONENT, SE, DIRECTLY, VALUE, ACCESS, KARNE, DETA, hai, BINA, PROPS, KE.
const ThemeContext = React.createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <ThemedButton />; // theme, prop se, PASS NAHI karna PADТA
}
function ThemedButton() {
const theme = React.useContext(ThemeContext); // DIRECTLY, ACCESS
return <button className={theme}>Click</button>;
}- Context, "prop drilling" (deeply nested props) ko, AVOID karta hai
- Provider, value, BROADCAST karta hai — useContext, kahi bhi, se, ACCESS karta hai
- Frequently-changing state ke liye, IDEAL NAHI — global, STABLE data ke liye, BEST
Multiple, Context, Providers, ko, NEST, KIYA, JA, SAKTA, hai (jaise, ThemeProvider, AuthProvider, EK, DUSRE, KE, ANDAR) — HAR, ONE, APNA, ALAG, CONCERN, HANDLE, KARTA, hai, aur, COMPONENTS, RELEVANT, Context, SE, useContext() SE, VALUE, LETE, HAIN.
<AuthProvider>
<ThemeProvider>
<App />
</ThemeProvider>
</AuthProvider>createContext(defaultValue), EK, DEFAULT, VALUE, ACCEPT, KARTA, hai — YE, VALUE, TAB, USE, HOTI, hai, JAB, EK, COMPONENT, useContext() CALL, KARTA, hai, LEKIN, KOI, MATCHING, Provider, ANCESTOR, MEIN, NAHI, MILТA. TESTING, MEIN, YE, USEFUL, hai (Provider, KE, BINA, bhi, COMPONENT, TEST, HO, SAKTA, hai).