React useState Hook Complete Guide (with Examples in Hindi)

नमस्ते दोस्तों! स्वागत है आपका एक और गहराई वाली चर्चा में। अगर आप ReactJS में अपना करियर बना रहे हैं या एक बेहतर डेवलपर बनना चाहते हैं, तो useState hook को समझना उतना ही जरूरी है जितना कि कार चलाने के लिए स्टियरिंग को समझना। हम अक्सर कोड लिखते समय सोचते हैं, "ये डेटा स्क्रीन पर अपडेट क्यों नहीं हो रहा?" यही वो मोड़ है जहाँ useState आपकी मदद करता है।

useState Hook क्या है और यह क्यों जरूरी है?

पुराने समय में, यानी React 16.8 से पहले, state को सिर्फ class components में रखा जा सकता था। लेकिन class components का syntax काफी बड़ा होता था। useState आने के बाद, हम अब साधारण functions के अंदर भी 'memory' रख सकते हैं। जब भी state बदलती है, React उस component को दोबारा 'render' करता है, जिससे लेटेस्ट डेटा यूजर को दिखता है।

useState का सिंटैक्स और स्ट्रक्चर

इसे इस्तेमाल करना बहुत आसान है। इसका syntax कुछ ऐसा दिखता है:

const [state, setState] = useState(initialValue);

• state: यह वो variable है जिसमें आपका data store होता है।
• setState: यह एक function है जिसे आप state को update करने के लिए कॉल करते हैं।
• initialValue: यह आपकी state की शुरुआती वैल्यू है (जैसे 0, "", या false)।

useState कैसे काम करता है: एक प्रैक्टिकल उदाहरण

चलिए एक simple counter app बनाते हैं। ध्यान रहे, यहाँ हम direct variable change नहीं कर रहे, बल्कि setter function का उपयोग कर रहे हैं।

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useState का उपयोग कब करें?

आप इसे तब इस्तेमाल करते हैं जब आपको किसी ऐसी चीज़ को ट्रैक करना हो जो समय के साथ बदलेगी। जैसे:

• Input forms का data
• Toggles (जैसे dark mode या light mode)
• API से आया हुआ डेटा
• Counter या Game score

useState में common mistakes और उन्हें fix कैसे करें

दोस्तों, अक्सर नए डेवलपर्स एक error करते हैं: वे state को direct modify करने की कोशिश करते हैं (जैसे count = count + 1)। याद रखें, React को पता ही नहीं चलेगा कि state बदल गई है। हमेशा setCount का ही use करें। अगर कभी code में कोई error आए, तो React docs को जरूर देखें, official documentation इस मामले में बेस्ट है।

Best Practices

1. हमेशा functional updates का इस्तेमाल करें जब नई state पुरानी state पर निर्भर हो: setCount(prev => prev + 1)।
2. एक component में कई बार useState का इस्तेमाल कर सकते हैं, कोई पाबंदी नहीं है।
3. State को बहुत ज्यादा deep-nesting न करें, अगर object बहुत complex है तो useReducer के बारे में सोचें।

तो दोस्तों, आज हमने useState की दुनिया को बारीकी से समझा। ये React में state management की नींव है। इसे अच्छे से प्रैक्टिस करें और अपने components को dynamic बनाएं!