नमस्ते👋🏻, यह लेख खास तौर पर उन शुरुआती लोगों के लिए बनाया गया है जो कई घटकों के बीच स्थिति को प्रबंधित करने के लिए अधिक प्रभावी तरीके सीखने के लिए उत्सुक हैं। इसका उद्देश्य प्रॉप ड्रिलिंग के सामान्य मुद्दे को संबोधित करना भी है जो आपके कोड को बनाए रखना और समझना कठिन बना सकता है। आइए इस बात से शुरू करें कि कॉन्टेक्स्ट एपीआई किस तरह की समस्या का समाधान करता है। यदि आप वीडियो प्रारूप पसंद करते हैं, तो यहां ट्यूटोरियल है जिसे आप मेरे YouTube चैनल पर देख सकते हैं। https://youtu.be/4p_VWn1AEvg?embedable=true प्रोप ड्रिलिंग क्या है? क्या आप जानते हैं कि कभी-कभी आपको पैरेंट कॉम्पोनेंट से चाइल्ड कॉम्पोनेंट तक डेटा पास करने की ज़रूरत होती है, और आप बीच में कई कॉम्पोनेंट से प्रॉप्स पास करते हैं? इसे कहा जाता है, और यह जल्दी ही गड़बड़ हो सकता है। आइए इसे स्पष्ट करने के लिए एक उदाहरण के ज़रिए चलते हैं। प्रॉप ड्रिलिंग जैसा कि आरेख में दिखाया गया है, कल्पना करें कि आपने घटक में कुछ डेटा प्राप्त किया है, जो आपके एप्लिकेशन के मूल में स्थित है। अब, यदि एक गहराई से नेस्टेड घटक, जैसे कि घटक, को इस डेटा तक पहुंचने की आवश्यकता है, तो आप आमतौर पर इसे तक पहुंचने से पहले और घटकों के माध्यम से प्रॉप्स के रूप में पास करेंगे। जैसे-जैसे आपका ऐप बढ़ता है, यह बदसूरत हो सकता है। App Grandchild Grandchild Parent Child यहाँ एक और दृश्य प्रतिनिधित्व है: ऊपर दिए गए उदाहरण में, घटक को उपयोगकर्ता डेटा की आवश्यकता होती है, लेकिन इस डेटा को पहले और घटकों से होकर गुजरना पड़ता है, भले ही ये मध्यवर्ती घटक स्वयं डेटा का उपयोग न करें। तो, हम इसे कैसे साफ़ करें? यहीं पर संदर्भ API काम आता है। Profile App Navigation प्रॉप्स ड्रिलिंग: घटकों के पुनः-प्रस्तुतिकरण को बढ़ाता है बॉयलरप्लेट कोड बढ़ाता है घटक निर्भरता बनाता है प्रदर्शन घटता है रिएक्ट संदर्भ एपीआई React.js में Context API आपको कॉम्पोनेंट ट्री के प्रत्येक स्तर के माध्यम से प्रॉप्स के रूप में पास किए बिना कॉम्पोनेंट के बीच डेटा पास करने देता है। यह एक वैश्विक स्टेट मैनेजमेंट सिस्टम की तरह काम करता है जहाँ आप अपने स्टेट को कॉन्टेक्स्ट ऑब्जेक्ट में परिभाषित करते हैं, और फिर आप कॉम्पोनेंट ट्री में कहीं भी इसे आसानी से एक्सेस कर सकते हैं। आइए इसे एक उदाहरण से समझते हैं। जैसा कि आप आरेख में देख सकते हैं, हमारे पास एक संदर्भ ऑब्जेक्ट है जो कई घटकों द्वारा एक्सेस किए जाने वाले डेटा को संग्रहीत करता है। यह डेटा API या तृतीय-पक्ष सेवाओं से प्राप्त किया जाता है। किसी भी घटक में इस संदर्भ डेटा तक पहुँचने से पहले, हमें उन सभी घटकों को लपेटना होगा जिन्हें इस डेटा की आवश्यकता होती है एक संदर्भ प्रदाता घटक में। अगर हमें सिर्फ़ नेविगेशन और प्रोफ़ाइल कॉम्पोनेंट में डेटा एक्सेस करने की ज़रूरत है, तो हमें ऐप कॉम्पोनेंट को रैप अप करने की ज़रूरत नहीं है। एक बार जब आप के साथ संबंधित कॉम्पोनेंट को रैप कर लेते हैं, तो आप सीधे किसी भी कॉम्पोनेंट में कॉन्टेक्स्ट डेटा एक्सेस कर सकते हैं जो इसका इस्तेमाल करता है। अगर आप अभी भी इसे नहीं समझ पाए हैं, तो चिंता न करें; आइए कोड में गोता लगाएँ और इसे कार्रवाई में देखें। ContextProvider संदर्भ एपीआई का उपयोग कैसे करें? सबसे पहले, आइए का उपयोग करके एक React ऐप बनाएं। प्रोजेक्ट सेट अप करने के लिए बस निम्नलिखित कमांड को कॉपी करें। Vite.js npm create vite@latest अपना प्रोजेक्ट नाम जोड़ें प्रतिक्रिया चुनें विकल्पों में से टाइपस्क्रिप्ट चुनें cd project_name // to change to project directory npm install npm run dev फिर आप अपने ब्राउज़र में अपना डेवलपमेंट सर्वर खोल सकते हैं। http://localhost:5173 सबसे पहले, आइए आवश्यक फ़ोल्डर्स बनाएँ। यहाँ हमारे प्रोजेक्ट की फ़ोल्डर संरचना है। src | components | context घटक फ़ोल्डर में आइए फ़ाइल बनाएं, और निम्नलिखित कोड जोड़ें। Profile.jsx import React from 'react' const Profile = () => { return ( <div>Profile</div> ) } export default Profile घटक फ़ोल्डर में नामक एक और घटक बनाएँ। Navbar.jsx import Profile from './Profile' const Navbar = () => { return ( <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "90%", height: "10vh", backgroundColor: theme === "light" ? "#fff" : "#1b1b1b", color: theme === "light" ? "#1b1b1b" : "#fff", border: "1px solid #fff", borderRadius: "5px", padding: "0 20px", marginTop: "40px", }}> <h1>LOGO</h1> <Profile /> </nav> ) } export default Navbar आइए इस घटक को फ़ाइल में आयात करें। <Navbar /> App.jsx import Navbar from "./components/Navbar"; function App() { return ( <main style={{ display: "flex", flexDirection: "column", justifyContent: "start", alignItems: "center", height: "100vh", width: "100vw", }} > <Navbar /> </main> ); } export default App; तो मूलतः, घटक का संतान है और घटक का संतान है। <Profile /> <Navbar /> <Navbar /> <App /> संदर्भ API जोड़ना आइए फ़ोल्डर में फ़ाइल बनाएँ। फ़ाइल में निम्न कोड जोड़ें। context UserContext.jsx import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( <UserContext.Provider value={{ user, fetchUserData }} > {children} </UserContext.Provider> ); }; सबसे पहले, हम उपयोग करके एक खाली ऑब्जेक्ट बनाते हैं। हम इसे से आयात करना सुनिश्चित करते हैं। हम context ऑब्जेक्ट के अंदर डिफ़ॉल्ट मान जोड़ सकते हैं, लेकिन हम इसे अभी के लिए null रखते हैं। createContext UserContext react इसके बाद, हम बनाते हैं, जो उपयोग करके एक प्रदाता लौटाता है, जैसे । यह बच्चों के घटकों के चारों ओर लपेटता है, और मूल्य में, हम कुछ भी पास कर सकते हैं जिसे हम बच्चे के घटकों में उपयोग करना चाहते हैं। UserProvider UserContext UserContext.Provider अभी, हम उपयोगकर्ता डेटा लाने के लिए उपयोग कर रहे हैं। परीक्षण उद्देश्यों के लिए नकली API एंडपॉइंट प्रदान करता है। फ़ंक्शन स्वीकार करता है और उपयोगकर्ता डेटा लाने के लिए उस आईडी का उपयोग करता है। फिर हम प्रतिक्रिया को स्थिति में संग्रहीत करते हैं। jsonplaceholder API का jsonplaceholder fetchUserData id user हम में फ़ंक्शन को कॉल कर रहे हैं, इसलिए पृष्ठ लोड होने पर, यह फ़ंक्शन को कॉल करता है, और यह स्थिति में डेटा को इंजेक्ट करता है। useEffect fetchUserData user अब, आइए इस संदर्भ को घटक में उपयोग करें। का उपयोग करके घटक को लपेटें; निम्न कोड के समान: <App /> <UserProvider /> <NavBar /> <UserProvider> <Navbar /> </UserProvider> आइए घटक में स्थिति का उपयोग करें। इसके लिए, हम हुक का उपयोग करेंगे। यह लेता है और में हमारे द्वारा पास किए गए मान जैसे कि स्थिति और फ़ंक्शन प्रदान करता है। याद रखें, हमें घटक को लपेटने की आवश्यकता नहीं है क्योंकि यह पहले से ही घटक में है जो पहले से ही प्रदाता के साथ लपेटा हुआ है। <Profile /> user useContext UserContext UserProvider user fetchUserData <Profile /> <Navbar /> खोलें, और निम्नलिखित कोड जोड़ें। Profile.jsx const { user } = useContext(UserContext); if (user) { return ( <span style={{ fontWeight: "bold", }} > {user.name} </span> ); } else { return <span>Login</span>; } यहाँ, हम से स्टेट का उपयोग कर रहे हैं। यदि है तो हम यूजरनेम प्रदर्शित करेंगे अन्यथा, हम केवल एक लॉगिन संदेश प्रदर्शित करेंगे। अब, यदि आप आउटपुट देखते हैं तो नेवबार घटक में एक यूजर नेम होना चाहिए। इस तरह हम किसी भी घटक के संदर्भ में किसी भी स्टेट का सीधे उपयोग कर सकते हैं। इस स्टेट का उपयोग करने वाले घटक को के भीतर लपेटा जाना चाहिए। UserContext user user <Provider /> आप कई संदर्भों का भी उपयोग कर सकते हैं। आपको बस प्रदाता घटकों को दूसरे प्रदाता घटक के भीतर लपेटना होगा जैसा कि निम्नलिखित उदाहरण में दिखाया गया है। <ThemeProvider> <UserProvider> <Navbar /> </UserProvider> </ThemeProvider> उपरोक्त उदाहरण में, हम उपयोग कर रहे हैं जो थीम स्थिति का प्रबंधन करता है। <ThemeProvider /> आप एकाधिक संदर्भ प्रदाताओं के उपयोग का पूरा उदाहरण देखने के लिए उपरोक्त यूट्यूब वीडियो देख सकते हैं। React Context API में री-रेंडर को अनुकूलित करना एक समस्या तब होती है जब आप कई घटकों में संदर्भ API का उपयोग करते हैं। जब भी संदर्भ API में स्थिति या मान बदलता है, तो यह उस विशेष संदर्भ के लिए सब्सक्राइब किए गए सभी घटकों को फिर से रेंडर करता है, भले ही सभी घटक बदली हुई स्थिति का उपयोग न कर रहे हों। इस पुनः-रेंडरिंग समस्या को समझने के लिए, आइए एक घटक बनाएं जो गिनती मानों को संग्रहीत और प्रदर्शित करने के लिए संदर्भ का उपयोग करता है। <Counter /> निम्न उदाहरण देखें। आप कॉम्पोनेंट फ़ोल्डर में फ़ाइल बना सकते हैं और निम्न कोड पेस्ट कर सकते हैं। Counter.jsx import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); }; function CountTitle() { console.log("This is Count Title component"); return <h1>Counter Title</h1>; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return <div>Count: {count}</div>; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> <CountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> ); } export default function Counter() { return ( <CountProvider> <CounterButton /> </CountProvider> ); } उपरोक्त कोड में: सबसे पहले, हम का उपयोग करके एक ऑब्जेक्ट बनाते हैं। createContext. CountContext हमारे पास count मानों को संग्रहीत करने के लिए एक स्टेट है। हम value prop के माध्यम से child components को और विधि भेज रहे हैं। CountProvider, count setCount हमने घटकों को अलग-अलग बनाया है ताकि यह देखा जा सके कि अलग-अलग घटक कितनी बार पुनः प्रस्तुत होते हैं। : यह घटक केवल शीर्षक प्रदर्शित करता है और संदर्भ से किसी भी मान का उपयोग भी नहीं करता है। <CountTitle /> : यह घटक गणना मान प्रदर्शित करता है और संदर्भ से स्थिति का उपयोग करता है। <CountDisplay /> count : यह घटक उपरोक्त घटक और बटन दोनों को प्रस्तुत करता है जो उपयोग करके गिनती मान बढ़ाता है। <CounterButton /> setCount अंत में, हम घटक को घटक के भीतर लपेट रहे हैं ताकि अन्य घटक count मानों तक पहुंच सकें। <CounterButton /> CountProvider अब, यदि आप कोड चलाते हैं और बटन पर क्लिक करते हैं, तो आप लॉग में देखेंगे कि प्रत्येक घटक हर बार स्थिति बदलने पर पुनः रेंडर हो रहा है। गिनती मानों का उपयोग भी नहीं कर रहा है, फिर भी यह पुनः रेंडर हो रहा है। ऐसा इसलिए हो रहा है क्योंकि का पैरेंट घटक जो है, गिनती के मान का उपयोग और अद्यतन कर रहा है और इसीलिए पुनः रेंडर हो रहा है। Increase <CountTitle /> <CountTitle /> <CounterButton /> हम इस व्यवहार को कैसे अनुकूलित कर सकते हैं? इसका उत्तर है । रिएक्ट आपको किसी कॉम्पोनेंट को फिर से रेंडर करने से रोकता है जब उसके प्रॉप्स अपरिवर्तित होते हैं। कॉम्पोनेंट के बाद, आइए निम्न पंक्ति जोड़ें। memo memo <CountTitle /> const MemoizedCountTitle = React.memo(CountTitle) अब, घटक में, जहाँ हम घटक को रेंडर कर रहे हैं, को से प्रतिस्थापित करें, जैसा कि निम्नलिखित कोड में है: <CounterButton /> <CountTitle /> <CountTitle /> <MemoizedCountTitle /> <> <MemoizedCountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> अब, यदि आप गिनती बढ़ाते हैं और लॉग की जांच करते हैं, तो आपको यह देखने में सक्षम होना चाहिए कि यह अब घटक को रेंडर नहीं कर रहा है। <CountTitle /> Redux बनाम संदर्भ API जटिल स्टेट मैनेजमेंट के लिए स्टेट मैनेजमेंट लाइब्रेरी है जिसमें अधिक पूर्वानुमानित स्टेट ट्रांजिशन होते हैं। जबकि कॉन्टेक्स्ट API को सरल स्टेट मैनेजमेंट और प्रॉप ड्रिलिंग के बिना कॉम्पोनेंट ट्री के माध्यम से डेटा पास करने के लिए डिज़ाइन किया गया है। तो, कब किसे चुनना है? Redux सरल, स्थानीयकृत राज्य प्रबंधन के लिए उपयोग करें जहां राज्य अक्सर नहीं बदलता है। React Context API का जटिल स्टेट प्रबंधन आवश्यकताओं के लिए का उपयोग करें, विशेष रूप से बड़े अनुप्रयोगों में जहां इसके संरचित स्टेट प्रबंधन के लाभ अतिरिक्त सेटअप से अधिक होते हैं। Redux एक और लाइब्रेरी भी है जो स्टेट मैनेजमेंट के लिए एक लोकप्रिय विकल्प है। । रिएक्ट रिकॉइल रिएक्ट के लिए एक स्टेट मैनेजमेंट लाइब्रेरी है जिसका उद्देश्य Redux की शक्ति और प्रदर्शन के साथ कॉन्टेक्स्ट API की सरलता प्रदान करना है। रिएक्ट रिकॉइल यदि आप के बारे में अधिक जानने में रुचि रखते हैं, तो मुझे टिप्पणियों में बताएं और मैं आपकी प्रतिक्रिया के आधार पर इस विषय पर गहन ट्यूटोरियल बनाऊंगा। रिएक्ट रिकॉइल निष्कर्ष Context API कई घटकों में स्थितियों को प्रबंधित करने का एक शक्तिशाली और कुशल तरीका प्रदान करता है, जो प्रॉप ड्रिलिंग के मुद्दे को प्रभावी ढंग से संबोधित करता है। Context API का उपयोग करके, आप अपने कोड को सरल बना सकते हैं, अनावश्यक री-रेंडर को कम कर सकते हैं और समग्र एप्लिकेशन प्रदर्शन में सुधार कर सकते हैं। React.js जबकि संदर्भ एपीआई सरल राज्य प्रबंधन के लिए आदर्श है, अधिक जटिल अनुप्रयोगों को या जैसी अन्य राज्य प्रबंधन लाइब्रेरी का उपयोग करने से लाभ हो सकता है। इन उपकरणों का उपयोग कब और कैसे करना है, यह समझने से आप अधिक रखरखाव योग्य और स्केलेबल React एप्लिकेशन बनाने में सक्षम होंगे। Redux React Recoil इस लेख को पढ़ने के लिए धन्यवाद, मुझे आशा है कि आपको यह उपयोगी लगा होगा। यदि आप React, Redux और Next.js का उपयोग करके प्रोजेक्ट बनाना और सीखना चाहते हैं, तो आप यहाँ मेरे YouTube चैनल पर जा सकते हैं: CodeBucks यहां मेरे अन्य लेख हैं जिन्हें आप पढ़ना पसंद करेंगे: Lenis और GSAP के साथ Next.js में सुचारू स्क्रॉलिंग कैसे लागू करें React.js में उपयोगकर्ता का स्थान कैसे प्राप्त करें शीर्ष 10 लोकप्रिय VS कोड थीम जिन्हें आपको अवश्य आज़माना चाहिए मेरे व्यक्तिगत ब्लॉग पर जाएँ: DevDreaming