banti kevat

Posted on Jul 7 • Originally published at itinfohubs.blogspot.com

React useContext Hook aur Context API Kaise Kaam Karta Hai

#javascript #programming #webdev #react

React useContext Hook और Context API क्या है? सीखें कैसे React me state management और prop drilling की समस्या को आसानी से हल किया जाता है।

तो मेरे दोस्तों, कैसे हो आप सब? आज हम ReactJS के एक बहुत ही महत्वपूर्ण और बेहद कमाल के फीचर के बारे में बात करने वाले हैं। अगर आप React में काम कर रहे हैं, तो आपने Prop Drilling की समस्या का सामना कभी न कभी जरूर किया होगा।

जब भी हमें किसी Parent Component की State को गहराई में बैठे किसी Child Component तक पहुँचाना होता है, तो हमें बीच के सभी Components को न चाहते हुए भी Props पास करने पड़ते हैं। यह काम बहुत ही उबाऊ और कोड को गंदा बनाने वाला है। इसी समस्या का पक्का इलाज है React Context API और useContext Hook। चलिए, आज बिल्कुल आसान भाषा में, चाय की चुस्की लेते हुए इसे गहराई से समझते हैं।

⚡ Quick Answer: React Context API एक builtin feature है जो global state management की सुविधा देता है, जिससे Prop Drilling ख़त्म होती है। useContext Hook की मदद से हम किसी भी nested React component में सीधे Context data को बिना किसी intermediary prop passing के consume कर सकते हैं।

Prop Drilling क्या है और यह क्यों एक समस्या है?

मान लीजिए आपके पास एक बहुत बड़ा React components का ट्री (Tree) है। सबसे ऊपर App Component है, और उसके अंदर Dashboard, फिर Sidebar, फिर Menu, और आखिरकार MenuItem Component है।

अब, अगर आपको App Component में मौजूद User Data को सीधे MenuItem तक पहुँचाना है, तो सामान्य तौर पर आप क्या करेंगे? आप Props का सहारा लेंगे।

🏗️ Prop Drilling Flow Diagram

App (Has State)
→
Dashboard (Just Passes)
→
Sidebar (Just Passes)
→
MenuItem (Uses State)

Diagram: Data passing through unnecessary intermediate components.

ध्यान देने वाली बात ये है कि Dashboard और Sidebar को उस User Data से कोई मतलब नहीं है, लेकिन फिर भी वे एक डाकिया (Postman) की तरह उस डेटा को आगे बढ़ा रहे हैं। इसी फालतू की प्रक्रिया को हम Prop Drilling कहते हैं।

इससे हमारा कोड बहुत भारी हो जाता है, रिफेक्टरींग (Refactoring) करना मुश्किल हो जाता है, और बेवजह की गलतियाँ होने की संभावना बढ़ जाती है।

React Context API क्या है और यह कैसे काम करता है?

React Context API इस समस्या का एक बेहद खूबसूरत समाधान है। इसे आप अपने घर में लगे एक WiFi Router की तरह समझ सकते हैं।

जैसे वाईफाई राउटर हवा में इंटरनेट सिग्नल फैला देता है और घर का कोई भी सदस्य पासवर्ड डालकर उसे इस्तेमाल कर सकता है—बिना किसी लंबे केबल तार के! ठीक वैसे ही, Context API एक Global State Container बना देता है, जहाँ से कोई भी Component सीधे डेटा खींच सकता है।

🏗️ Context API Flow Diagram

React Context (Store)

↙
↘

App (Provider)

MenuItem (Direct Access)

Diagram: Direct state subscription using Context.

Context API मुख्य रूप से तीन चीजों से मिलकर बना है:

React.createContext(): यह हमारा Context बनाता है (यानी वाईफाई नेटवर्क सेटअप करता है)।
Provider: यह वो Component है जो डेटा को अपने नीचे वाले सभी Components को उपलब्ध कराता है (यानी वाईफाई राउटर जो सिग्नल ब्रॉडकास्ट करता है)।
Consumer / useContext: यह वो तरीका है जिससे कोई भी नीचे वाला Component सीधे उस डेटा को इस्तेमाल कर पाता है (यानी आपका मोबाइल जो वाईफाई से जुड़ता है)।

React useContext Hook का उपयोग कब और क्यों करें?

पहले के समय में, Context से डेटा निकालने के लिए हमें <Context.Consumer> का इस्तेमाल करना पड़ता था, जो काफी मुश्किल और जटिल था। उसमें हमें Render Props Pattern का इस्तेमाल करना पड़ता था, जिससे कोड बहुत गंदा दिखता था।

लेकिन जब से React 16.8 में Hooks आए, तब से useContext Hook ने जिंदगी को बेहद आसान बना दिया है। अब हमें किसी Consumer Wrapper की जरूरत नहीं पड़ती। हम बस एक लाइन का कोड लिखते हैं और सारा डेटा हमारे हाथ में आ जाता है!

आधिकारिक तौर पर, इसका उपयोग तब करना चाहिए जब आपके एप्लीकेशन में कुछ ऐसा डेटा हो जो लगभग हर जगह इस्तेमाल हो रहा हो, जैसे:

Theme Data: लाइट मोड (Light Mode) या डार्क मोड (Dark Mode) सेटिंग्स।
User Session: लॉग-इन यूजर की प्रोफाइल डिटेल्स और ऑथेंटिकेशन टोकन।
Language Settings: भाषा बदलने का विकल्प (Multi-language localization)।
Shopping Cart: ई-कॉमर्स साइट में यूजर के कार्ट का डेटा।

Step-by-Step Guide: Context API और useContext Hook का Implementation

चलिए, अब हम एक पूरा और पूरी तरह से काम करने वाला (Production-ready) उदाहरण बनाते हैं। हम एक Theme Switcher Application बनाएंगे जहाँ यूजर एक बटन दबाकर लाइट से डार्क मोड में स्विच कर सकेगा।

हम इसे तीन आसान चरणों में पूरा करेंगे। ध्यान से देखना, कोड का हर एक हिस्सा बहुत महत्वपूर्ण है!

Step 1: Context और Provider बनाना

सबसे पहले, हम एक नई फाइल बनाएंगे जिसका नाम होगा ThemeContext.js। इसमें हम अपना Context तैयार करेंगे और एक Custom Provider Component भी बनाएंगे जो हमारी State को मैनेज करेगा।

import React, { createContext, useState } from 'react';

// 1. Context को क्रिएट करें
export const ThemeContext = createContext();

// 2. Provider Component बनाएं जो पूरी स्टेट को रैप करेगा
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  // थीम को टॉगल (Toggle) करने का फंक्शन
  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (

      {children}

  );
};

Step 2: Provider को App Component में रैप करना

अब हमें अपने इस ThemeProvider को अपने पूरे एप्लीकेशन के ऊपर लगाना होगा ताकि इसके नीचे मौजूद सभी Components को यह डेटा मिल सके। इसके लिए हम index.js या App.js में इसे इम्पोर्ट करेंगे।

import React from 'react';
import { ThemeProvider } from './ThemeContext';
import Header from './Header';
import Content from './Content';
import './styles.css';

function App() {
  return (
    <ThemeProvider>
      <div className="app-container">
        <Header />
        <Content />
      </div>
    </ThemeProvider>
  );
}

export default App;

Step 3: Child Components में useContext Hook का उपयोग करना

अब हम दो Components बनाएंगे: Header और Content। ये दोनों बिना किसी Props के सीधे ThemeContext से डेटा (theme और toggleTheme) निकाल कर इस्तेमाल करेंगे।

सबसे पहले बनाते हैं Header.js:

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Header = () => {
  // useContext Hook का उपयोग करके सीधे वैल्यूज निकालें
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <header style={{ 
      padding: '20px', 
      textAlign: 'center',
      background: theme === 'light' ? '#f1f1f1' : '#222',
      color: theme === 'light' ? '#333' : '#fff',
      borderBottom: '1px solid #ccc'
    }}>
      <h1>मेरा कमाल का ऐप</h1>
      <button 
        onClick={toggleTheme} 
        style={{
          padding: '10px 20px',
          cursor: 'pointer',
          background: theme === 'light' ? '#333' : '#f1f1f1',
          color: theme === 'light' ? '#fff' : '#333',
          border: 'none',
          borderRadius: '5px',
          fontWeight: 'bold'
        }}
      >
        {theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode'}
      </button>
    </header>
  );
};

export default Header;

अब बनाते हैं Content.js जो यूजर को करंट थीम का स्टेटस दिखाएगा:

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Content = () => {
  // सीधे Context से थीम स्टेट प्राप्त करें
  const { theme } = useContext(ThemeContext);

  return (
    <main style={{
      padding: '40px 20px',
      textAlign: 'center',
      minHeight: '200px',
      backgroundColor: theme === 'light' ? '#ffffff' : '#121212',
      color: theme === 'light' ? '#000000' : '#ffffff',
      transition: 'all 0.3s ease'
    }}>
      <h2>स्वागत है आपका हमारे ब्लॉग पर!</h2>
      <p>यह कंटेंट अभी <strong>{theme.toUpperCase()}</strong> मोड में दिख रहा है।</p>
    </main>
  );
};

export default Content;

देखा आपने? कितना सरल और साफ-सुथरा कोड बन गया। हमने न तो Header को कोई Prop भेजा और न ही Content को। दोनों ने सीधे आसमान से (यानी हमारे Context Store से) डेटा कैच कर लिया!

Prop Drilling vs Context API vs Redux

अब आपके मन में यह सवाल उठ सकता है कि "भाई, अगर यह इतना ही बढ़िया है, तो लोग Redux का उपयोग क्यों करते हैं?" या "हमें कब किसका इस्तेमाल करना चाहिए?"

आइए इसे एक आसान टेबल के जरिए समझते हैं ताकि आपके सारे डाउट्स हमेशा के लिए क्लियर हो जाएं:

विशेषता (Feature)	Prop Drilling	Context API	Redux / Toolkit
सैटअप की जटिलता	बहुत आसान (कोई सेटअप नहीं)	मध्यम (सरल और इन-बिल्ट)	काफी कठिन (Boilerplate कोड अधिक)
स्टेट का दायरा	केवल लोकल पेरेंट-चाइल्ड तक	पूरे एप्लीकेशन के लिए (Global)	बहुत बड़े और जटिल ग्लोबल स्टेट के लिए
परफॉरमेंस	तेज (कोई अतिरिक्त ओवरहेड नहीं)	छोटे ऐप्स के लिए बेस्ट, बड़े ऐप्स में री-रेंडर की दिक्कत	शानदार (सिर्फ वही कंपोनेंट री-रेंडर होता है जो बदलता है)
बाहरी लाइब्रेरी	किसी लाइब्रेरी की जरूरत नहीं	React का इन-बिल्ट फीचर है	हाँ, Redux-Toolkit इनस्टॉल करना पड़ता है

Performance Optimization: Context API में Re-render की समस्या को कैसे रोकें?

यहाँ पर एक बहुत ही महत्वपूर्ण बात है जो हर सीनियर डेवलपर को पता होती है। ध्यान से सुनो दोस्तों!

जब भी Context Provider की वैल्यू (Value) बदलती है, तो वे सभी Components जो उस Context को consume कर रहे हैं, वे दोबारा री-रेंडर (Re-render) होते हैं। चाहे उनके काम का डेटा बदला हो या न बदला हो।

अगर आपके पास एक बहुत बड़ा ऑब्जेक्ट है जिसमें कई सारी स्टेट्स हैं, और आप उनमें से सिर्फ एक वैल्यू बदलते हैं, तो भी उसे इस्तेमाल करने वाले सभी कंपोनेंट्स हिल जाएंगे। इसे ठीक करने के लिए हम दो बेहतरीन तरीके अपना सकते हैं:

1. Context को छोटे-छोटे टुकड़ों में विभाजित करें (Split Contexts)

एक ही बड़े "Global Context" में पूरी दुनिया भर का डेटा मत डालिए। यूजर प्रोफाइल के लिए UserContext अलग बनाइए, और थीम सेटिंग्स के लिए ThemeContext अलग बनाइए। इससे एक की स्टेट बदलने पर दूसरे के कंपोनेंट्स पर कोई असर नहीं पड़ेगा।

2. useMemo का इस्तेमाल करें

अगर आप Context में कोई ऑब्जेक्ट पास कर रहे हैं, तो उसे useMemo हुक की मदद से मेमोइज़ (Memoize) कर लें। इससे अनचाहे री-रेंडर्स काफी हद तक रुक जाते हैं।

const value = useMemo(() => ({ theme, toggleTheme }), [theme]);

return (
  <ThemeContext.Provider value={value}>
    {children}
  </ThemeContext.Provider>
);

Common Errors और उनके Debugging Solutions

जब आप Context API के साथ काम करेंगे, तो आपको कुछ कॉमन एरर्स देखने को मिल सकते हैं। आइए जानते हैं उन्हें चुटकियों में कैसे हल करें:

त्रुटि 1: "Cannot read properties of undefined (reading 'Provider')"

यह क्यों होता है? यह तब होता है जब आप Context ऑब्जेक्ट को ठीक से एक्सपोर्ट या इम्पोर्ट नहीं करते हैं।

समाधान: सुनिश्चित करें कि आपने export const MyContext = createContext() लिखा है (Named Export) और इम्पोर्ट करते समय भी कर्ली ब्रेसेस import { MyContext } } का सही उपयोग किया है।

त्रुटि 2: useContext हुक से 'undefined' या 'null' मिलना

यह क्यों होता है? यह सबसे आम गलती है। इसका मतलब है कि आप जिस Component के अंदर useContext(MyContext) का उपयोग कर रहे हैं, वह Component आपके <MyContext.Provider> के अंदर रैप (Wrap) नहीं है।

समाधान: अपने Component Tree को चेक करें। सुनिश्चित करें कि आपका Provider सबसे ऊपर (जैसे App.js में) बैठा है और सारे कंज्यूमर्स उसके अंदर आ रहे हैं।

आप इस समस्या को रोकने के लिए एक बेहतरीन Custom Hook भी बना सकते हैं जो एरर को खुद संभाल लेगा:

// Custom Hook जो एरर को आसानी से हैंडल करता है
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme का उपयोग ThemeProvider के अंदर ही किया जाना चाहिए!");
  }
  return context;
};

यह तकनीक आपको बेहतरीन कोडिंग स्टैंडर्ड्स बनाए रखने और किसी भी अनचाहे fix error को जल्दी पकड़ने में मदद करेगी।

संक्षेप में कहें तो...

तो दोस्तों, आज हमने सीखा कि React Context API और useContext Hook हमारे कोडिंग के सफर को कितना आसान बना सकते हैं। हमने देखा कि कैसे हम Prop Drilling की झंझट से मुक्ति पा सकते हैं और अपने कोड को अधिक साफ़ और स्केलेबल बना सकते हैं।

याद रखें, हर छोटे-बड़े काम के लिए भारी-भरकम Redux सेटअप करने की जरूरत नहीं है; अधिकांश मध्यम आकार के प्रोजेक्ट्स का काम अकेले Context API बहुत शानदार तरीके से संभाल सकता है। इसे अपने अगले प्रोजेक्ट में आज ही आज़माएँ और अपना कोडिंग अनुभव बेहतर बनाएं!

Frequently Asked Questions (FAQs)

Q1: क्या Context API का उपयोग Redux को पूरी तरह से रिप्लेस कर सकता है?
छोटे और मध्यम आकार के ऐप्स के लिए हाँ, Context API बेहतरीन है। लेकिन बहुत बड़े एंटरप्राइज लेवल एप्लिकेशन्स जहाँ पर स्टेट्स बार-बार बदलती हैं और स्टेट की ट्रेसिंग (debugging) जरूरी होती है, वहाँ आज भी Redux / Zustand अधिक उपयोगी हैं।
Q2: क्या हम एक ही App में कई Context का उपयोग कर सकते हैं?
हाँ, बिल्कुल! आप जितने चाहें उतने Context Providers बना सकते हैं और उन्हें एक दूसरे के अंदर नेस्ट (nest) कर सकते हैं। इसे "Context Splitting" कहते हैं जो परफॉरमेंस के लिए बहुत अच्छा माना जाता है।
Q3: useContext Hook का उपयोग करने के क्या नुकसान हैं?
इसका मुख्य नुकसान यह है कि जब भी Context की वैल्यू बदलती है, उसे इस्तेमाल करने वाले सभी कंपोनेंट्स री-रेंडर होते हैं। इसके अलावा, कंपोनेंट का रीयूज़ेबिलिटी (reusability) थोड़ा कम हो जाता है क्योंकि वह एक खास Context पर निर्भर हो जाता है।
Q4: क्या useContext का उपयोग केवल Functional Components में ही किया जा सकता है?
हाँ, useContext एक React Hook है, इसलिए इसका उपयोग केवल Functional Components या Custom Hooks के अंदर ही किया जा सकता है। Class Components के लिए आपको Static contextType या Context.Consumer का उपयोग करना होगा।
Q5: Context API के साथ काम करते समय री-रेंडरिंग से कैसे बचें?
री-रेंडरिंग से बचने के लिए आप Context को विभाजित (split) कर सकते हैं, Provider की वैल्यूज को React.useMemo() से मेमोइज़ कर सकते हैं, या फिर बहुत अधिक अपडेट होने वाली स्टेट्स के लिए Zustand जैसी हल्की स्टेट मैनेजमेंट लाइब्रेरी का उपयोग कर सकते हैं।

अधिक जानकारी और गहराई से सीखने के लिए आप React Official Documentation पर जा सकते हैं। हैप्पी कोडिंग!

DEV Community