banti kevat

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

React Context vs Redux Kab Kya Use Karein

#javascript #programming #webdev #react

React Context vs Redux: State management के लिए क्या चुनें? Is detailed guide में components, performance और prop drilling का आसान solution सीखें।

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

⚡ Quick Answer: छोटे और मध्यम प्रोजेक्ट्स के लिए जहां low-frequency updates (जैसे UI Themes, User Authentication) होते हैं, वहां React Context API सबसे बेस्ट है क्योंकि यह lightweight है। इसके विपरीत, बड़े स्केल के applications में जहां high-frequency updates, complex business logic और बेहतरीन debugging टूल्स की जरूरत होती है, वहां Redux Toolkit का इस्तेमाल करना सबसे सही फैसला है।

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 भी पूरी तरह खत्म हो जाती है।

🏗️ Prop Drilling vs Global State Flow

App Component (State)
↓
Middle Component 1
↓
Middle Component 2
↓
Leaf Component

Global Store (Context/Redux)
➔ Direct Access ➔
Leaf Component

Diagram: How Prop Drilling bypasses middle components via Global State Management

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 इन बुनियादी सिद्धांतों पर काम करता है:

Single Source of Truth: आपके पूरे एप्लीकेशन की state एक ही ऑब्जेक्ट (Store) के अंदर स्टोर होती है।
State is Read-Only: आप स्टेट को सीधे चेंज नहीं कर सकते। स्टेट बदलने का एकमात्र तरीका एक Action dispatch करना है।
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 में मुख्य अंतर क्या हैं?

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

Features / criteria	React Context API	Redux / Redux Toolkit
Setup & Configuration	बहुत ही आसान और बिना किसी एक्स्ट्रा पैकेज के काम करता है।	RTK के बाद भी आपको स्टोर, स्लाइस, और प्रोवाइडर्स सेटअप करने पड़ते हैं।
Performance (Re-renders)	कमज़ोर। Context value बदलने पर इसके नीचे के सभी उपभोक्ता components re-render होते हैं।	शानदार। `useSelector` सिर्फ उसी component को re-render करता है जिसका विशिष्ट डेटा बदला है।
Middleware Support	कोई इन-बिल्ट सपोर्ट नहीं है। आपको खुद के custom hooks बनाने होंगे।	बेहतरीन। Redux-Thunk या Redux-Saga जैसे कस्टमाइज्ड मिडिलवेयर डिफ़ॉल्ट रूप से मिलते हैं।
Debugging Tools	साधारण React DevTools से काम चलाना पड़ता है।	Redux DevTools Extension की मदद से Time-Travel Debugging मुमकिन है।
Bundle Size	Zero (क्योंकि यह React में पहले से ही मौजूद है)।	यह आपके bundle size में कुछ KB और जोड़ देता है।

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 का हथियार उठाना ही समझदारी होगी।

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

Frequently Asked Questions (FAQs)

Q1: क्या हम React Context API और Redux दोनों को एक ही प्रोजेक्ट में इस्तेमाल कर सकते हैं?
हाँ, बिल्कुल! आप दोनों को एक ही प्रोजेक्ट में मिक्स करके इस्तेमाल कर सकते हैं। उदाहरण के लिए, आप ग्लोबल थीम या यूजर प्रोफाइल के लिए Context API का उपयोग कर सकते हैं और शॉपिंग कार्ट जैसी जटिल और हेवी बिजनेस लॉजिक वाली स्टेट्स के लिए Redux का उपयोग कर सकते हैं।
Q2: क्या React Context API सच में Redux को पूरी तरह रिप्लेस कर सकता है?
नहीं, ऐसा नहीं है। भले ही Context API प्रोप ड्रिलिंग की समस्या को हल करता है, लेकिन इसमें रेंडर ऑप्टिमाइज़ेशन, मिडिलवेयर चैनिंग और एडवांस्ड डीबगिंग टूल्स की कमी होती है, जो बड़े प्रोजेक्ट्स में बेहद जरूरी होते हैं। इसलिए यह Redux का रिप्लेसमेंट नहीं है।
Q3: React Context API में परफॉरमेंस की समस्या क्यों आती है?
Context API में जब भी Provider की वैल्यू चेंज होती है, तो वे सभी कंपोनेंट्स जो उस Context को कंज्यूम कर रहे हैं, जबरन री-रेंडर होते हैं। अगर कंपोनेंट ट्री बहुत बड़ा और डीप है, तो यह अननेसेसरी रेंडरिंग ऐप की परफॉरमेंस को स्लो कर देती है।
Q4: Redux Toolkit (RTK) और ट्रेडिशनल Redux में क्या फर्क है?
ट्रेडिशनल Redux में बहुत अधिक बॉयलरप्लेट कोड (Action creators, Reducers, constants) लिखना पड़ता था। Redux Toolkit (RTK) ने इन सभी को बहुत छोटा और आसान बना दिया है। इसमें रेकमेंडेड कंफिगरेशन इन-बिल्ट आती हैं और यह डवलपर एक्सपीरियंस को बेहतर बनाता है।
Q5: क्या बड़े प्रोजेक्ट्स में सिर्फ Context API का उपयोग करना एक अच्छा विचार है?
आमतौर पर नहीं। बड़े प्रोजेक्ट्स में स्टेट बहुत फ्रीक्वेंटली और रैंडमली अपडेट होती है। केवल Context API का उपयोग करने से कोड को मेंटेन करना मुश्किल हो जाएगा और परफॉरमेंस डीग्रेड होगी क्योंकि स्टेट अपडेट्स पर पूरा कंपोनेंट ट्री री-रेंडर होने लगेगा।

DEV Community