useContext Hook

Prop Drilling Avoid Karna

💡 useContext, EK, "OFFICE ANNOUNCEMENT SYSTEM" hai — EK, BAAR, ANNOUNCEMENT, (VALUE), BROADCAST, HONE, KE, BAAD, POORE, BUILDING, (COMPONENT TREE) mein, KISI, BHI, ROOM, (COMPONENT) SE, SUNA, JA, SAKTA, hai — HAR, FLOOR, (INTERMEDIATE COMPONENT) SE, MANUALLY, MESSAGE, PASS, KARNE, KI, ZAROORAT, NAHI.

"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>;
}

🌐

useContext, EK, "OFFICE ANNOUNCEMENT SYSTEM" hai — EK, BAAR, ANNOUNCEMENT, (VALUE), BROADCAST, HONE, KE, BAAD, POORE, BUILDING, (COMPONENT TREE) mein, KISI, BHI, ROOM, (COMPONENT) SE, SUNA, JA, SAKTA, hai — HAR, FLOOR, (INTERMEDIATE COMPONENT) SE, MANUALLY, MESSAGE, PASS, KARNE, KI, ZAROORAT, NAHI.

1 / 2

⚡ झट से Recap

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

इस page में (2 subtopics)

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).

💡Tip: Default, VALUE, "FALLBACK" HAI — PRODUCTION, CODE, MEIN, HAMESHA, EK, Provider, WRAP, KARNA, CHAHIYE, TAAKI, ACTUAL, VALUE, MILE.

← पिछला⏱️ useEffect Hook अगला →📌 useRef Hook

Code10x

useContext Hook

Multiple Contexts Composition

Context Default Value