React me Multiple useState kaise Manage Karein (in Hindi)

तो मेरे दोस्तों, कैसे हो आप सब? अगर आप ReactJS सीख रहे हैं, तो एक समय ऐसा जरूर आया होगा जब आपने एक बड़ा Form बनाया होगा। उस Form में Name, Email, Password, Phone Number, Age, Gender और न जाने क्या-क्या fields होंगी। हर field के लिए एक नया useState लिखना, फिर उसका onChange handler बनाना... देखते ही देखते आपका component 50-100 lines का तो सिर्फ State Management के लिए ही बन जाता है!

एक सीनियर डेवलपर के तौर पर, जब मैं junior developers का कोड review करता हूँ, तो यह सबसे आम गलती दिखती है। कोड काम तो करता है, लेकिन वह बहुत गंदा, unmaintainable और कभी-कभी slow भी हो जाता है। आज हम और आप साथ मिलकर बैठेंगे, चाय की चुस्की लेंगे, और यह समझेंगे कि React me Multiple useState कैसे Manage Karein ताकि आपका कोड एकदम Clean, Professional और Scalable बने।

React में Multiple useState क्या है और इसकी जरूरत क्यों पड़ती है?

जब हम कोई Dynamic UI बनाते हैं, तो हमें Users के Inputs, Loading States, Modals का Open/Close होना, या Validation Errors को track करना पड़ता है। इन सबको React में State कहा जाता है।

शुरुआत में, हम हर छोटी चीज़ के लिए एक नया State Variable बना देते हैं। जैसे:

const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);

इसे ही हम Multiple useState का Use करना कहते हैं। लेकिन ध्यान देने वाली बात ये है कि जब ये States आपस में Related होती हैं (जैसे एक Form की Fields), तो अलग-अलग State Hooks बनाने से कोड की readability खराब हो जाती है। हर State को React अलग से track करता है, जिससे component re-render होने का flow भी पेचीदा हो जाता है। हमें React Official Documentation भी यही सिखाता है कि जो States हमेशा एक साथ बदलती हैं, उन्हें एक ही State Object में रखना बेहतर होता है।

React में Multiple useState को Manage करने के कौन-से तरीके हैं?

मेरे दोस्त, इस समस्या को सुलझाने के मुख्य रूप से तीन तरीके हैं। चलिए इन तीनों तरीकों को गहराई से समझते हैं ताकि आपको पता हो कि कब कौन-सा तरीका चुनना है।

1. Multiple Independent States (अलग-अलग Hooks)

यह सबसे आसान और सीधा तरीका है। जब आपके States का आपस में कोई सीधा संबंध न हो (जैसे: एक State Modal open/close करने के लिए है और दूसरी Dark Mode toggle करने के लिए), तब आप इसी तरीके का इस्तेमाल करें।

2. Single Object State (एक Object में सब कुछ)

जब आपके पास बहुत सारी Inputs हों जो एक ही Form का हिस्सा हैं, तो उन सभी को एक JavaScript Object में डाल देना सबसे बेस्ट प्रैक्टिस है। इससे आपका Handler Function सिर्फ एक लाइन का रह जाता है।

3. useReducer Hook (जटिल State के लिए ब्रह्मास्त्र)

जब आपकी State Management बहुत जटिल हो जाए, जहाँ एक State की Value दूसरी State पर निर्भर करती है, तब useReducer सबसे बढ़िया विकल्प है। यह Redux की तरह काम करता है लेकिन इसके लिए किसी external library की जरूरत नहीं पड़ती।

Multiple Independent States vs Single Object State: दोनों में क्या अंतर है?

चलिए एक Table के ज़रिए समझते हैं कि इन दोनों Approaches में क्या अंतर है ताकि आपके दिमाग में कोई भी दुविधा न रहे:

एक Complex Form State को Single Object के साथ कैसे Handle करें? (Step-by-Step Guide)

अब हम सीधे कोड में कूदते हैं! मान लीजिए कि हम एक User Registration Form बना रहे हैं। इसमें हम Single Object State का इस्तेमाल करेंगे और सिर्फ एक onChange Handler की मदद से पूरे Form को control करेंगे।

Step 1: State Object को Initialize करना

सबसे पहले, हम अपने React components में useState को एक Object के साथ initialize करेंगे।

const [formData, setFormData] = useState({
  username: "",
  email: "",
  password: "",
  country: "India",
  agreeToTerms: false
});

Step 2: Generic Handle Change Function बनाना

यह इस तकनीक का सबसे जादुई हिस्सा है। हम JavaScript की dynamic key evaluation [name]: value का उपयोग करेंगे।

const handleChange = (event) => {
  const { name, value, type, checked } = event.target;
  
  setFormData((prevData) => ({
    ...prevData,
    [name]: type === "checkbox" ? checked : value
  }));
};

ध्यान देने वाली बात ये है कि: यहाँ ...prevData (Spread Operator) लिखना बहुत जरूरी है। अगर आप इसे नहीं लिखेंगे, तो आपकी पुरानी State पूरी तरह से delete हो जाएगी और सिर्फ नया अपडेटेड field ही बचेगा!

Step 3: Complete, Production-Ready Code

चलिए अब पूरा Working Component देखते हैं जिसे आप सीधे अपने project में use कर सकते हैं:

import React, { useState } from "react";

const RegistrationForm = () => {
  // Step 1: Initialize Single Object State
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: "",
    country: "India",
    agreeToTerms: false
  });

  const [submittedData, setSubmittedData] = useState(null);

  // Step 2: Single Handler for all Inputs
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    
    setFormData((prevData) => ({
      ...prevData,
      [name]: type === "checkbox" ? checked : value
    }));
  };

  // Step 3: Handle Form Submit
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmittedData(formData);
    // Submit logic or API call here
  };

  return (
    

      
Join Our Community
      

        
        {/* Username Field */}
        

          Username
          
        

        {/* Email Field */}
        

          Email Address
          
        

        {/* Password Field */}
        

          Password
          
        

        {/* Dropdown Field */}
        

          Country
          
            India
            USA
            Canada
            UK
          
        

        {/* Checkbox Field */}
        

          
          I agree to terms and conditions
        

        
          Register Now
        
      

      {submittedData && (
        

          
Form Submitted Successfully!
          
{JSON.stringify(submittedData, null, 2)}
        
      )}
    
  );
};

export default RegistrationForm;

Common Errors और Developer Mistakes (और उन्हें कैसे Fix करें)

जब आप React में multiple states को object के जरिए manage करते हैं, तो कुछ सामान्य गलतियां (common bugs) होती हैं जो बड़े-बड़े Developers भी कर बैठते हैं। आइए देखते हैं कि वे क्या हैं और उनका समाधान कैसे निकालें:

गलती #1: React State Direct Mutation (सीधे State बदलना)

बहुत से नए डेवलपर्स गलती से State Object को सीधे बदल देते हैं, जैसे:

// ❌ NEVER DO THIS!
formData.username = "new_value"; 

अगर आप ऐसा करेंगे, तो React को पता ही नहीं चलेगा कि State बदल चुकी है, क्योंकि Object का memory reference चेंज नहीं हुआ। React re-render नहीं होगा।

💡 समाधान (Solution): हमेशा Setter function (setFormData) का उपयोग करें और एक नया Object reference पास करें (Spread Operator के साथ)।

गलती #2: Nested Object State को गलत तरीके से Update करना

मान लीजिए आपकी State ऐसी है:

const [user, setUser] = useState({
  name: "",
  address: {
    city: "",
    zip: ""
  }
});

अगर आप सीधे setUser({ ...user, address: { city: "Delhi" } }) करेंगे, तो zip गायब हो जाएगा! क्योंकि Nested Objects को भी deep spread करना पड़ता है।

इस error को सुलझाने का सही तरीका यह है:

setUser((prevUser) => ({
  ...prevUser,
  address: {
    ...prevUser.address,
    city: "Delhi" // Now zip is preserved!
  }
}));

Advanced Technique: useReducer कब इस्तेमाल करना चाहिए?

मेरे दोस्त, यदि आपके पास कोई ऐसा फॉर्म है जिसमें 10-15 fields हैं, custom validation rules हैं, और एक input बदलने पर दूसरी input की values dynamically update होती हैं, तो Single Object State भी कम पड़ सकती है। यहाँ पर useReducer Hook काम आता है।

चलो देखते हैं कि useReducer का ढांचा कैसा होता है:

import React, { useReducer } from "react";

// Initial State Definition
const initialState = {
  count: 0,
  username: "",
  error: null
};

// Reducer function that handles state transitions based on Actions
const formReducer = (state, action) => {
  switch (action.type) {
    case "SET_FIELD":
      return {
        ...state,
        [action.field]: action.value
      };
    case "SET_ERROR":
      return {
        ...state,
        error: action.payload
      };
    case "RESET_FORM":
      return initialState;
    default:
      return state;
  }
};

const ReducerFormExample = () => {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleInputChange = (e) => {
    dispatch({
      type: "SET_FIELD",
      field: e.target.name,
      value: e.target.value
    });
  };

  return (
    

      
useReducer State Management
      
       dispatch({ type: "RESET_FORM" })} style={{ padding: "10px", background: "#ef4444", color: "#fff", border: "none", cursor: "pointer" }}>
        Reset Form
      
    
  );
};

export default ReducerFormExample;

Best Practices: State Management को Super-Optimized कैसे बनाएं?

एक सीनियर आर्किटेक्ट के नजरिए से, मैं आपको कुछ अनमोल सलाह देना चाहूंगा जो आपकी Application की Performance को एकदम मक्खन जैसी तेज बना देंगी:

• Keep State Local: जब तक किसी state की जरूरत parent या sibling components को न हो, तब तक उसे component के अंदर ही रखें (Lift State Up सिर्फ तभी करें जब सचमुच आवश्यक हो)।
• Avoid Unnecessary re-renders: React 18 में State Batching अपने आप काम करती है (यानी एक event handler के अंदर multiple updates होने पर भी React सिर्फ एक बार Render करेगा)। लेकिन, Complex dynamic forms के लिए आप Uncontrolled Inputs (using useRef) पर विचार कर सकते हैं अगर performance critical हो।
• Form Libraries: अगर आपका प्रोजेक्ट बहुत बड़ा है और उसमें heavy validations हैं, तो खुद का wheel re-invent न करें। Formik या React Hook Form जैसी बेहतरीन Library का उपयोग करें जो internal states को optimized तरीके से हैंडल करती हैं।

तो दोस्तों, हमने आज क्या-क्या सीखा? React में Multiple useState को Manage करने के लिए अलग-अलग states का उपयोग तभी करें जब वे पूरी तरह स्वतंत्र हों। यदि वे आपस में जुड़ी हुई हैं, तो Single Object State को Dynamic Handlers के साथ इस्तेमाल करना सबसे बेहतरीन तकनीक है। और यदि आपकी Business Logic बहुत अधिक जटिल है, तो बेझिझक useReducer की तरफ़ कदम बढाएं।