Frontend Academy · पाठ

useState Hook: State और Re-renders

component में local state जोड़ने के लिए useState call करें, setter function से state update करें और समझें कि React कब और क्यों दोबारा render करता है।

पाठ 3, कुल 4 में से13 चरण

useState Hook: State और Re-renders, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्थिति क्या है

स्थिति वह डेटा है, जो समय के साथ बदलता है और बदलने पर UI को अपडेट करना चाहिए। साधारण चरों के विपरीत, स्थिति में बदलाव React को नए मान के साथ घटक को फिर से रेंडर करने के लिए प्रेरित करता है।

useState वाक्यविन्यास

useState(initialValue) एक टपल लौटाता है: वर्तमान मान और एक सेटर फ़ंक्शन। इसे तुरंत डिस्ट्रक्चर करें।

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

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

TypeScript: useState का प्रकार निर्धारित करना

TypeScript प्रारंभिक मान से प्रकार का अनुमान लगाता है। जब प्रारंभिक मान अस्पष्ट हो, जैसे null या खाली सरणी, तो स्पष्ट प्रकार पैरामीटर जोड़ें।

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

स्थिति बदलने पर फिर से रेंडर

सेटर फ़ंक्शन को कॉल करने पर फिर से रेंडर निर्धारित होता है। React आपके घटक फ़ंक्शन को नए स्थिति मान के साथ फिर से कॉल करता है। लौटाया गया JSX वर्चुअल DOM में पिछले रेंडर का स्थान ले लेता है।

स्थिति अपडेट अतुल्यकालिक होते हैं

स्थिति अपडेट को बैच में रखा जाता है और तुरंत नहीं, बल्कि अगले रेंडर से पहले लागू किया जाता है। उसी इवेंट हैंडलर में अपडेट की गई स्थिति को न पढ़ें — नया मान अगले रेंडर तक उपलब्ध नहीं होता।

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

फ़ंक्शनल अपडेट

जब नया स्थिति मान पिछली स्थिति पर निर्भर करता हो, तो सेटर के फ़ंक्शनल रूप का उपयोग करें। इससे पुराने क्लोज़र से होने वाली त्रुटियों से बचा जा सकता है।

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

ऑब्जेक्ट्स के साथ स्थिति

जब स्थिति एक ऑब्जेक्ट हो, तो हमेशा नया ऑब्जेक्ट बनाएँ — मौजूदा ऑब्जेक्ट को न बदलें। React संदर्भ के आधार पर तुलना करता है; बदलाव फिर से रेंडर शुरू नहीं करेंगे।

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

एकाधिक स्थिति चर

स्वतंत्र स्थिति चरों के लिए useState को कई बार कॉल करें। जब मान साथ-साथ नहीं बदलते हों, तब यह एक बड़े स्थिति ऑब्जेक्ट से अधिक साफ़ तरीका है।

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

विलंबित आरंभीकरण

यदि प्रारंभिक स्थिति के लिए महँगी गणना आवश्यक हो, तो useState में एक फ़ंक्शन पास करें। यह हर फिर से रेंडर पर नहीं, केवल पहले रेंडर पर चलता है।

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

स्थिति का उपयोग कब न करें

हर चर को स्थिति होने की आवश्यकता नहीं होती। व्युत्पन्न मान (total = items.reduce(…)) को स्थिति में संग्रहीत करने के बजाय रेंडर के दौरान गणना करनी चाहिए। प्रॉप्स से निकली स्थिति आमतौर पर अनावश्यक जटिलता का संकेत होती है।

स्थिति को ऊपर उठाना

जब दो सहोदर घटकों को स्थिति साझा करने की आवश्यकता हो, तो उसे उनके साझा पूर्वज तक ऊपर उठाएँ और प्रॉप्स के रूप में नीचे भेजें। संदर्भ या स्टोर का उपयोग करने से पहले यह React स्थिति प्रबंधन का मूल पैटर्न है।

त्वरित जाँच

setCount(count + 1) के बजाय फ़ंक्शनल रूप setCount(prev => prev + 1) का उपयोग क्यों करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: useState

useState [value, setter] लौटाता है। प्रारंभिक मान प्रकार निर्धारित करता है, या स्पष्ट जेनरिक का उपयोग करें। सेटर फिर से रेंडर शुरू करता है। जब नई स्थिति पुरानी स्थिति पर निर्भर हो, तो फ़ंक्शनल अपडेट का उपयोग करें। ऑब्जेक्ट्स के लिए हमेशा नए ऑब्जेक्ट में स्प्रेड करें, कभी बदलाव न करें। महँगी गणनाओं के लिए विलंबित आरंभीकरण करें। जब सहोदर घटकों को स्थिति साझा करनी हो, तो स्थिति को साझा पूर्वज तक ऊपर उठाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “useState Hook: State और Re-renders” पाठ निःशुल्क है?

हाँ—“useState Hook: State और Re-renders” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“useState Hook: State और Re-renders” में मैं क्या सीखूँगा?

component में local state जोड़ने के लिए useState call करें, setter function से state update करें और समझें कि React कब और क्यों दोबारा render करता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“useState Hook: State और Re-renders” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Frontend Academy पर वापस जाएँ