React useContext Hook aur Context API Kaise Kaam Karta Hai (in Hindi)

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

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

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

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

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

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

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

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

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

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

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 का उपयोग क्यों करते हैं?" या "हमें कब किसका इस्तेमाल करना चाहिए?"

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

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 बहुत शानदार तरीके से संभाल सकता है। इसे अपने अगले प्रोजेक्ट में आज ही आज़माएँ और अपना कोडिंग अनुभव बेहतर बनाएं!

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