useContext Hook का उपयोग
useContext एक walkie-talkie है जो एक deeply nested component को component tree में बहुत ऊपर से broadcast हो रही एक value सुनने देता है, बीच में किसी को relay किए बिना।
Syntax
const MyContext = createContext(defaultValue);
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
// In any nested component
const value = useContext(MyContext);Creating and Providing Context
React.createContext(defaultValue) एक Context object बनाता है। आपके component tree के किसी हिस्से को <MyContext.Provider value={...}> में wrap करना उस value को इसके अंदर nested हर component के लिए available बनाता है, चाहे वह कितना भी levels deep हो।
Note:
Context objects को किसी component के बाहर, module के top level पर बनाएं, ताकि वे हर render पर फिर से न बनें।
Warning:
बिना
value prop वाला एक Provider silently context की default value पर fall back करता है, जो debug करना confusing हो सकता है।उदाहरण: Creating and Providing Context
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const ThemeContext = React.createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = React.useContext(ThemeContext);
return <p>Current theme: {theme}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Reading Context with useContext
Matching Provider के अंदर nested कोई भी component current value directly पढ़ने के लिए useContext(MyContext) call कर सकता है, बिना उस value को हर intermediate component के props के through explicitly passed किए।
Note:
useContext काम करता है भले ही consuming component कितना भी deeply nested हो -- value को हर layer में manually pass करने की ज़रूरत नहीं।
Warning:
किसी matching Provider के बाहर useContext उपयोग करने वाला एक component context की default value पाएगा, error नहीं।
उदाहरण: Reading Context with useContext
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const UserContext = React.createContext({ name: "Guest" });
function DeeplyNestedGreeting() {
const user = React.useContext(UserContext);
return <p>Hello, {user.name}!</p>;
}
function App() {
return (
<UserContext.Provider value={{ name: "Sam" }}>
<div><div><DeeplyNestedGreeting /></div></div>
</UserContext.Provider>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Avoiding Prop Drilling
Context के बिना, एक deeply nested component के साथ एक value share करने का मतलब है इसे बीच में हर component के through एक prop के रूप में pass करना, even वे जो इसे खुद उपयोग नहीं करते -- इसे 'prop drilling' कहा जाता है।
Context इसे solve करता है deeply nested component को value directly पढ़ने देकर।
Note:
Context तब उपयोग करें जब आप notice करें कि आप same prop को कई layers के components के through pass कर रहे हैं जिन्हें otherwise इसकी ज़रूरत नहीं है।
Warning:
Context को बिल्कुल हर चीज़ के लिए उपयोग करना, even सिर्फ एक या दो nearby components को चाहिए वाली values के लिए भी, unnecessary indirection जोड़ता है -- plain props अक्सर simpler होते हैं।
उदाहरण: Avoiding Prop Drilling
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const CountContext = React.createContext(0);
function DeepDisplay() {
const count = React.useContext(CountContext);
return <p>Count from context: {count}</p>;
}
function App() {
const [count, setCount] = React.useState(0);
return (
<CountContext.Provider value={count}>
<button onClick={() => setCount(count + 1)}>Increment</button>
<div><DeepDisplay /></div>
</CountContext.Provider>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- Value चाहने वाले components को matching Context.Provider में wrap करना भूल जाना।
- एक नया context बनाना लेकिन कभी एक value provide न करना, consumers को सिर्फ default value के साथ stuck छोड़ते हुए।
- बहुत frequently change होने वाली values के लिए context को overuse करना, हर consumer को अक्सर re-render करवाते हुए।
चैप्टर सारांश
- Context आपको हर level पर manually props pass किए बिना कई components में एक value share करने देता है।
createContextएक Context object बनाता है;.Providerएक value supply करता है;useContextइसे पढ़ता है।- कोई भी descendant component useContext से context value पढ़ सकता है, चाहे कितना भी deeply nested हो।
- Context theme, logged-in user info, या language settings जैसे global-ish data के लिए ideal है।
ब्राउज़र सपोर्ट
createContext और useContext क्रमशः React 16.3 और React 16.8 से available हैं।
🔒
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: