React Context vs Redux Kab Kya Use Karein (in Hindi)

दोस्तों, क्या आप भी इस बात को लेकर हमेशा उलझन में रहते हैं कि अपने ReactJS प्रोजेक्ट में State Management के लिए React Context API का इस्तेमाल करें या Redux का? जब हम एक नया प्रोजेक्ट शुरू करते हैं, तो शुरुआत में सब कुछ बहुत आसान लगता है। लेकिन जैसे-जैसे components का साइज बढ़ता है, data को एक जगह से दूसरी जगह पास करना एक बड़ा सिरदर्द बन जाता है। आज हम और आप, दोनों मिलकर इस मुद्दे पर गहराई से चर्चा करेंगे और समझेंगे कि किस परिस्थिति में कौन सा टूल आपके लिए बेस्ट रहेगा।

Prop Drilling क्या है और यह हमें कैसे परेशान करती है?

इससे पहले कि हम React Context vs Redux के युद्ध में उतरें, हमें उस असली विलेन को समझना होगा जिसने हमें इन दोनों टूल्स का उपयोग करने पर मजबूर किया। उस विलेन का नाम है — Prop Drilling।

मान लीजिए आपके पास एक React Component Tree है। सबसे ऊपर App component है, और सबसे नीचे 5वें लेवल पर एक ProfileCard component है। अब अगर App component के पास मौजूद user data को ProfileCard तक पहुँचाना है, तो आपको बीच के उन 3-4 components में भी उस props को जबरदस्ती पास करना होगा जिन्हें उस data से कोई लेना-देना ही नहीं है।

इसे ही हम Prop Drilling कहते हैं। यह न सिर्फ आपके code को गंदा (boilerplate-heavy) बनाता है, बल्कि इससे component reusability भी पूरी तरह खत्म हो जाती है।

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

React v16.3 में पेश किया गया React Context API एक इन-बिल्ट फीचर है। इसका मुख्य काम component tree के माध्यम से data को बिना मैन्युअल रूप से हर लेवल पर props पास किए सीधे नीचे के components तक पहुँचाना है।

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

• React.createContext(): यह वह जगह है जहाँ हम अपना global context डिक्लेअर करते हैं।
• Context.Provider: यह component अपने अंदर रैप किए गए सभी components को value/state प्रोवाइड करता है।
• useContext() Hook: इस hook का उपयोग करके कोई भी child component सीधे उस context की value को कंज्यूम कर सकता है।

React Context का एक Production-Ready Example

चलिए, एक असली लाइफ का उदाहरण देखते हैं जहाँ हम एक Theme Management (Light/Dark mode) को React Context के जरिए इम्प्लीमेंट करेंगे।

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

// Context क्रिएट करना
const ThemeContext = createContext();

// Provider Component बनाना
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

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

// Custom Hook आसान इस्तेमाल के लिए
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

अब इस Provider को हम अपने Root level component यानी App.js में रैप करेंगे ताकि हर component को थीम का एक्सेस मिल सके:

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import Header from './Header';
import Content from './Content';

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

export default App;

अब देखिए कि कैसे हमारा Content.js बिना किसी prop drilling के सीधे थीम स्टेट को बदल सकता है:

// Content.js
import React from 'react';
import { useTheme } from './ThemeContext';

function Content() {
  const { theme, toggleTheme } = useTheme();

  const styles = {
    backgroundColor: theme === 'light' ? '#ffffff' : '#1e293b',
    color: theme === 'light' ? '#000000' : '#f8fafc',
    padding: '40px',
    textAlign: 'center',
    transition: 'all 0.3s ease'
  };

  return (
    <div style={styles}>
      <h1>React Context Active Theme: {theme.toUpperCase()}</h1>
      <button 
        style={{ padding: '10px 20px', cursor: 'pointer', marginTop: '10px' }} 
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
}

export default Content;

Redux क्या है और इसकी जरूरत क्यों पड़ी?

Redux एक इंडिपेंडेंट global state management लाइब्रेरी है। जब React आया था, तब complex apps में state को मैनेज करने के लिए Flux आर्किटेक्चर का इस्तेमाल होता था। उसी को मॉडर्न और आसान बनाने के लिए Dan Abramov ने Redux को बनाया।

आज के समय में हम raw Redux का इस्तेमाल नहीं करते हैं क्योंकि उसमें बहुत अधिक boilerplate code लिखना पड़ता था। अब हम Redux Toolkit (RTK) का उपयोग करते हैं, जो कि Redux का ऑफिशियल, ओपिनियनेटेड और रेकमेंडेड तरीका है।

Redux इन बुनियादी सिद्धांतों पर काम करता है:

1. Single Source of Truth: आपके पूरे एप्लीकेशन की state एक ही ऑब्जेक्ट (Store) के अंदर स्टोर होती है।
2. State is Read-Only: आप स्टेट को सीधे चेंज नहीं कर सकते। स्टेट बदलने का एकमात्र तरीका एक Action dispatch करना है।
3. Changes are Made with Pure Functions (Reducers): Reducer एक pure function होता है जो पुरानी state और action लेता है, और एक नई state रिटर्न करता है।

Redux Toolkit (RTK) का एक Complete Implementation

आइए, एक शॉपिंग कार्ट (Shopping Cart) का उदाहरण लेते हैं। कार्ट का डेटा हमेशा कॉम्प्लेक्स होता है, क्योंकि इसमें सामान जोड़ना, हटाना, क्वांटिटी बदलना जैसी कई चीजें होती हैं।

सबसे पहले Redux Toolkit को सेटअप करने के लिए Slice क्रिएट करते हैं:

// cartSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  cartItems: [],
  totalAmount: 0,
};

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action) => {
      const existingIndex = state.cartItems.findIndex(item => item.id === action.payload.id);
      
      if (existingIndex >= 0) {
        state.cartItems[existingIndex].quantity += 1;
      } else {
        const tempProduct = { ...action.payload, quantity: 1 };
        state.cartItems.push(tempProduct);
      }
      state.totalAmount = state.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
    },
    removeFromCart: (state, action) => {
      state.cartItems = state.cartItems.filter(item => item.id !== action.payload.id);
      state.totalAmount = state.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
    }
  }
});

export const { addToCart, removeFromCart } = cartSlice.actions;
export default cartSlice.reducer;

अब, इस Slice को Store में रजिस्टर करते हैं:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

अब इस Store को पूरे React Application में उपलब्ध कराने के लिए react-redux के Provider का इस्तेमाल करेंगे:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { store } from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

अब हम किसी भी component में useSelector और useDispatch hooks की मदद से कार्ट स्टेट को एक्सेस और मॉडिफाई कर सकते हैं:

// CartComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addToCart, removeFromCart } from './cartSlice';

function CartComponent() {
  const { cartItems, totalAmount } = useSelector((state) => state.cart);
  const dispatch = useDispatch();

  const dummyProduct = { id: 101, name: 'Premium Wireless Headphones', price: 299 };

  return (
    <div style={{ padding: '24px', fontFamily: 'Arial, sans-serif' }}>
      <h2>🛒 Redux Toolkit Shopping Cart</h2>
      <button 
        onClick={() => dispatch(addToCart(dummyProduct))}
        style={{ padding: '8px 16px', background: '#2563eb', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
      >
        Add Headphones ($299)
      </button>

      <div style={{ marginTop: '20px' }}>
        <h3>Cart Items:</h3>
        {cartItems.length === 0 ? (
          <p>Your cart is empty</p>
        ) : (
          <ul>
            {cartItems.map(item => (
              <li key={item.id} style={{ marginBottom: '10px' }}>
                {item.name} - Qty: {item.quantity} - ${item.price * item.quantity}
                <button 
                  onClick={() => dispatch(removeFromCart({ id: item.id }))}
                  style={{ marginLeft: '10px', padding: '2px 8px', background: '#dc2626', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
      <h3>Total Amount: ${totalAmount}</h3>
    </div>
  );
}

export default CartComponent;

React Context vs Redux में मुख्य अंतर क्या हैं?

इन दोनों टूल्स की ताकत को समझने के लिए आइए इनके बीच का सीधा अंतर देखते हैं:

React Context vs Redux: कब किसका उपयोग करना चाहिए?

यह सवाल हर इंटरव्यू में और हर बड़े आर्किटेक्चरल डिस्कशन में पूछा जाता है। इसका फैसला पूरी तरह से आपके प्रोजेक्ट के स्केल और जरूरतों पर निर्भर करता है।

React Context API का उपयोग कब करें?

• जब आपका एप्लीकेशन छोटा या मध्यम आकार का हो।
• जब आपकी स्टेट ऐसी हो जो बार-बार न बदले (Low-frequency updates)। उदाहरण के लिए: User Authentication state, UI Theme switcher, Language configurations (i18n)।
• जब आप अपने bundle size को बहुत ही हल्का रखना चाहते हैं।

Redux / Redux Toolkit का उपयोग कब करें?

• जब आप एक बड़े स्केल (Enterprise level) का एप्लीकेशन बना रहे हैं जहाँ स्टेट बहुत जटिल है।
• जब आपकी स्टेट बहुत जल्दी-जल्दी अपडेट होती है (High-frequency updates)। जैसे: Collaborative text editors, Real-time stock dashboards, Multi-step checkout forms।
• जब आपके पास बहुत सारे API calls हों और आपको caching, offline-first behavior या optimistic UI updates को संभालना हो। (Note: Redux का RTK Query इस काम के लिए वर्ल्ड-क्लास है)।
• जब आपको टीम में एक कड़े कोडिंग स्ट्रक्चर की जरूरत हो ताकि हर डेवलपर एक जैसा कोड पैटर्न फॉलो करे।

Common Errors और Performance Bugs को कैसे Fix करें?

जब आप इन दोनों टूल्स का उपयोग प्रोडक्शन पर करते हैं, तो अक्सर कुछ गंभीर समस्याएँ आती हैं। आइए देखते हैं कि उन्हें कैसे fix error की केटेगरी में डालकर डीबग करें:

1. Context API का Unnecessary Re-renders Bug

समस्या: जब आप Context Provider में एक object पास करते हैं, तो भले ही component को केवल उस object की एक सिंगल property चाहिए हो, पूरा component दोबारा रेंडर हो जाता है जब भी object में कोई बदलाव आता है।

समाधान: इसे रोकने के लिए आप एक बड़े context को छोटे-छोटे कई Contexts में विभाजित कर सकते हैं (Context Splitting) या useMemo का उपयोग कर सकते हैं।

// Performance Optimization using useMemo
const value = useMemo(() => ({ theme, toggleTheme }), [theme]);
return (
  <ThemeContext.Provider value={value}>
    {children}
  </ThemeContext.Provider>
);

2. Redux State Mutation Error

समस्या: Redux में सीधे स्टेट को म्यूटेट (जैसे: state.items = push(newItem)) करने पर पुराना डेटा करप्ट हो जाता है और कंपोनेंट रेंडर नहीं होते।

समाधान: हमेशा एक नया ऑब्जेक्ट रिटर्न करें। हालांकि, Redux Toolkit अंदरूनी रूप से Immer.js का उपयोग करता है जिससे आप सेफली "mutable" कोड लिख सकते हैं, लेकिन फिर भी raw Redux या बिना RTK के डायरेक्ट म्यूटेशन से बचें।

Toh dosto, humne aaj seekha...

तो दोस्तों, आज हमने देखा कि React Context API और Redux दोनों ही अपनी-अपनी जगह पर लाजवाब टूल्स हैं। कोई भी एक टूल दूसरे से पूरी तरह बेहतर नहीं है। अगर आपका काम सादे घर के काम जैसा है, तो Context API आपकी सबसे अच्छी दोस्त है। लेकिन अगर आपको एक बड़ी फैक्टरी या पूरा शहर संभालना है, तो Redux का हथियार उठाना ही समझदारी होगी।

हमेशा याद रखिए कि सही टूल का चुनाव इस बात पर निर्भर करता है कि आपकी समस्या क्या है, न कि इस बात पर कि कौन सा टूल ज्यादा ट्रेंड कर रहा है। अपने अगले प्रोजेक्ट में इन दोनों का बैलेंस बनाकर इस्तेमाल कीजिए और कोडिंग का आनंद लीजिए!