React useState Hook Complete Guide (with Examples in Hindi)

React useState Hook kya hai aur iska istemal kaise karte hain? Is Hindi guide me hum state management, functional components aur examples dekhenge.

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

⚡ Quick Answer: useState एक React Hook है जो functional components के अंदर local state को manage करने की सुविधा देता है। यह डेटा में बदलाव होने पर UI को automatically re-render करता है, जिससे आपका वेब पेज user interaction के साथ real-time में अपडेट होता रहता है।

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)।

🏗️ Architecture Diagram

User Interaction
→
setState()
→
Re-render

Diagram: State update hone par React component ka UI refresh hota hai.

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

Feature	useState	Regular Variable
UI Update	Automatic	No
Memory	Maintained	Lost on Re-render

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 के बारे में सोचें।

Frequently Asked Questions (FAQs)

Q1: Kya hum useState ko if-else ya loops ke andar use kar sakte hain?
Bilkul nahi! Hooks ko hamesha component ke top level par call karna chahiye. Loops ya conditions me ise use karne se "Rules of Hooks" ka violation hota hai.
Q2: Kya set state function synchronous hai?
React me state updates asynchronous ho sakte hain. Isliye turant baad value check karne par purani value mil sakti hai.
Q3: Object ko kaise update karein?
Object update karte waqt spread operator (...) ka use karein taaki purani values preserve rahein.
Q4: Kya useState class components me chalta hai?
Nahi, useState sirf functional components me hi kaam karta hai. Class components me this.state ka use hota hai.
Q5: Kya performance issue ho sakta hai?
Normal cases me nahi, lekin agar state update bohot frequently ho rahi hai to performance optimize karne ke liye memoization techniques use karni chahiye.

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