यूजस्टेट हुक - एक व्यापक गाइड

एक राज्य क्या है?

इससे पहले कि हम यूज़स्टेट हुक में गहराई से गोता लगाएँ, आइए पहले इस शब्द को समझें राज्य.

राज्य किसी निश्चित समय पर किसी चीज़ के बारे में जानकारी का प्रतिनिधित्व करता है।

उदाहरण के लिए, आइए एक टेक्स्टबॉक्स पर विचार करें।

प्रारंभ में, इस टेक्स्टबॉक्स के अंदर कुछ भी नहीं है, इसलिए इसकी स्थिति है खाली. मान लीजिए आप इसके अंदर हैलो टाइप करना शुरू करते हैं, प्रत्येक कुंजी स्ट्रोक के लिए टेक्स्टबॉक्स की स्थिति बदल जाएगी। पहले यह "H" होगा, फिर "He", फिर "Hel" और इसी तरह जब तक यह "Hello" नहीं हो जाता।

साथ ही, ध्यान दें कि जैसे-जैसे आप टाइप कर रहे हैं, आप पिछले मान को नहीं खो रहे हैं। यदि आप "एच" के बाद "ई" दबाते हैं तो आपको "वह" मिल रहा है, न कि केवल "ई"। दूसरे शब्दों में आप राज्य के बारे में सोच सकते हैं: स्मृति टेक्स्टबॉक्स का।

एक प्रतिक्रिया घटक में राज्य की आवश्यकता।

इसे एक उदाहरण की मदद से समझते हैं।

राज्य के बिना कोडसैनबॉक्स

यहाँ हमारे पास है क्लिक काउंटर घटक जो इंक्रीमेंट बटन पर क्लिक किए जाने की संख्या को प्रदर्शित करता है।

हम एक का उपयोग कर रहे हैं स्थानीय चर "काउंटर" क्लिकों की गिनती रखने के लिए।

हर बार जब हम Increment बटन पर क्लिक करते हैं, हैंडलक्लिक समारोह का आह्वान किया जाएगा। यह फ़ंक्शन काउंटर मान को 1 से बढ़ा देगा और कंसोल में मान भी लॉग करेगा।

आगे बढ़ें, कोडसैंडबॉक्स पूर्वावलोकन में वृद्धि बटन पर क्लिक करें।

कुछ नहीं हुआ?

वैसे हमारा तर्क सही लगता है। हर बार जब हम क्लिक करते हैं तो कंसोल (कोडसैंडबॉक्स) में लॉग किया गया मान सही ढंग से अपडेट होता है, लेकिन यह अपडेट UI में क्यों नहीं दिखाई देता है?

यह प्रतिक्रिया के काम करने के तरीके के कारण है।

• स्थानीय चरों में परिवर्तन पुन: प्रस्तुतीकरण को ट्रिगर नहीं करते हैं।
• री-रेंडर के दौरान, एक घटक खरोंच से बनाया जाता है यानी एक घटक का कार्य (इस उदाहरण में यह क्लिककाउंटर फ़ंक्शन है) एक बार फिर से निष्पादित किया जाता है। चूंकि चर (उदाहरण के लिए, काउंटर) फ़ंक्शन के लिए स्थानीय हैं, उनके पिछले मान खो गए हैं।

तो हम घटक को रेंडरर्स के बीच मूल्यों को कैसे याद करते हैं?

हाँ, आपने सही समझा! हम इसे की मदद से करते हैं उपयोग करें हुक।

यूजस्टेट हुक

यूजस्टेट हुक राज्य को संरक्षित करने और पुन: प्रस्तुत करने के लिए तंत्र प्रदान करता है।

आइए इसके उपयोग को देखें।

import React, { useState } from "react";
const state = useState(initialValue);

// OR

const state = React.useState(initialValue);

यूज़स्टेट हुक एक सरणी देता है जिसमें दो आइटम होते हैं:

• A अवस्था चर जो री-रेंडर के दौरान अपने मूल्यों को बरकरार रखता है। यूज़स्टेट को दिया गया प्रारंभिक मान पहले रेंडर के दौरान स्टेट वेरिएबल को सौंपा गया है।
• A सेटर फंक्शन जो स्टेट वेरिएबल को अपडेट करता है और री-रेंडर को भी ट्रिगर करता है।

const state = useState(0);
const data = state[0];
const setData = state[1];

का प्रयोग सरणी डी-स्ट्रक्चरिंग , हम उपरोक्त कथनों को एक ही कथन में पुन: सक्रिय कर सकते हैं, जैसा कि नीचे दिखाया गया है:

const [data, setData] = useState(0);

यूज़स्टेट को दिया गया प्रारंभिक मान केवल पहले रेंडर के दौरान उपयोग किया जाता है। पुन: प्रस्तुत करने के लिए, इसे अनदेखा किया जाता है।

उपयोग राज्य के साथ काउंटर

अब, यूज़स्टेट हुक को शामिल करने के लिए पहले के काउंटर उदाहरण को अपडेट करते हैं।

• चूंकि हमें री-रेंडर के बीच काउंटर वैल्यू की आवश्यकता है, आइए इसे एक राज्य में परिवर्तित करें।

const [counter, setCounter] = useState(0);

• हैंडलक्लिक फ़ंक्शन के अंदर कॉलिंग सेटकाउंटर।

const handleClick = () => {
  setCounter(counter + 1);
  console.log(`%c Counter:${counter}`, "color:green");
};

सेटकाउंटर फ़ंक्शन काउंटर वैल्यू को 1 से अपडेट करेगा और री-रेंडर को ट्रिगर करेगा। जब घटक के फ़ंक्शन को पुन: प्रस्तुत करने पर कॉल किया जाता है, तो स्टेट वेरिएबल का उपयोग स्टेट द्वारा लौटाया जाता है, जिसका अद्यतन मूल्य होगा।

अद्यतन कोड के साथ कोडसैंडबॉक्स आज़माएं। इंक्रीमेंट बटन पर क्लिक करें और यूजस्टेट का जादू देखें।

उपयोग राज्य के साथ कोडसैनबॉक्स

आप सत्यापित कर सकते हैं कि पुन: प्रस्तुत करने पर, कार्यात्मक घटक क्लिक काउंटर कंसोल लॉग देखकर फिर से कॉल किया जाता है। लॉग "क्लिककाउंटर स्टार्ट" जो घटक की शुरुआत में जोड़ा जाता है, प्रत्येक रेंडर पर लॉग किया जाएगा।

अद्यतनकर्ता समारोह

मान लीजिए कि हम प्रत्येक क्लिक पर काउंटर का मान 4 बढ़ाना चाहते हैं।

const handleClick = () => {
  setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

मान लें कि काउंटर का प्रारंभिक मान 0 है। बटन पर क्लिक करने के बाद आप क्या देखने की उम्मीद करते हैं?

अपडेटर फ़ंक्शन के बिना

आपको उम्मीद थी कि गिनती 4 सही होगी? लेकिन आप इसके बजाय 1 क्यों देखते हैं?

a) प्रत्येक रेंडर एक राज्य से जुड़ा होता है। उस राज्य का मूल्य उस रेंडर के जीवन भर के लिए बंद रहता है।

ध्यान दें कि हैंडलक्लिक फ़ंक्शन के अंदर लॉग काउंटर मान को 0 के रूप में प्रिंट करता है।

आप कितनी भी बार सेटकाउंटर विधि को कॉल करें, काउंटर का मूल्य वही रहता है।

const handleClick = () => {
  setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

बी) जब तक किसी ईवेंट हैंडलर के अंदर सभी कोड निष्पादित नहीं हो जाते, तब तक रिएक्ट फिर से रेंडर को ट्रिगर नहीं करेगा।

इस कारण से प्रत्येक सेटकाउंटर कॉल एक व्यक्तिगत रेंडर को ट्रिगर नहीं करता है। इसके बजाय रिएक्ट इन सेटर कार्यों को एक कतार में जोड़ता है। उन्हें उस क्रम में निष्पादित करता है जिस क्रम में वे कतारबद्ध थे। सभी बयानों को निष्पादित करने के बाद राज्य में किए गए अपडेट अगले रेंडर में दिखाई देते हैं। कई राज्य अद्यतनों की इस कतार के रूप में जाना जाता है बैचिंग. यह रिएक्ट को अधिक प्रदर्शन करने की अनुमति देता है।

इसलिए, यहां हमें 4 अलग-अलग रेंडर के बजाय सिंगल रेंडर मिलता है।

यह उदाहरण सरल है और आप नीचे दिखाए गए कोड को अपडेट करके इस समस्या को ठीक कर सकते हैं:

const handleClick = () => {
setCounter(counter + 4);
    console.log(`%c Counter:${counter}`, "color:green");
    };

लेकिन क्या होगा अगर आपके पास एक उपयोग का मामला था जहां आप अगले रेंडर से पहले कई बार राज्य को अपडेट करना चाहते थे।

वहीं _ अपडेटर _ फंक्शन काम आता है।

हम पिछले उदाहरण को अद्यतनकर्ता फ़ंक्शन के साथ निम्नानुसार पुन: सक्रिय कर सकते हैं:

const handleClick = () => {
  setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

यहाँ पिछला काउंटर पिछला काउंटर + 1 अद्यतनकर्ता फ़ंक्शन का प्रतिनिधित्व करता है।

जैसा कि पहले बताया गया है, ये अपडेटर स्टेटमेंट भी कतारबद्ध (बैचिंग) हैं।

अद्यतनकर्ता फ़ंक्शन एक लंबित/पिछली स्थिति प्राप्त करता है जिसका उपयोग वह अगले राज्य की गणना करने के लिए करता है।

नीचे कोडसैंडबॉक्स है जिसमें अपडेटर फ़ंक्शन जोड़ा गया है। वृद्धि बटन पर क्लिक करने का प्रयास करें।

अपडेटर फंक्शन सैंडबॉक्स

प्रारंभकर्ता समारोह

नीचे दिए गए उदाहरण पर एक नज़र डालें। यहां हम राज्य के लिए प्रारंभिक मूल्य प्राप्त करने के लिए getItems फ़ंक्शन को कॉल कर रहे हैं।

import React from "react";
import { useState } from "react";
function ListItems() { 
  const getItems = () => { 
    console.log(`%c getItems called`, "color:hotpink");
    	return Array(50).fill(0); 
    }; 
  const [items, setItems] = useState(getItems()); 
    
    return ( 
    	<div className="card">
        <ul> {items.map((item, index) => 
        	( <li key={index}>Item {index + 1}		</li>))} 
        </ul> <button onClick={() => setItems([...items, 0])}>Add Item</button> 	</div> );
} 
export default ListItems;

यह फ़ंक्शन आकार 50 के साथ एक सरणी बनाता है और सरणी को शून्य से भरता है। नीचे दी गई छवि का संदर्भ लें।

फिर इन वस्तुओं को स्क्रीन पर प्रदर्शित किया जाता है।

ऐसा लगता है कि सब कुछ ठीक है लेकिन हमारे यहां एक समस्या है।

पर क्लिक करें सामान जोडें बटन (वस्तुओं की सूची के बाद स्थित) सूची में एक नया आइटम जोड़ने के लिए। लॉग का निरीक्षण करें।

प्रारंभकर्ता समारोह के बिना

क्या आप यहां समस्या देखते हैं?

हर बार जब आप कोई आइटम जोड़ते हैं तो लॉग "getItems कॉल किया जाता है" कंसोल में जुड़ जाता है। इसका मतलब है कि प्रत्येक रेंडर पर इस फ़ंक्शन को कॉल किया जा रहा है।

याद रखें कि उपयोगस्टेट पहले रेंडर के बाद इसे पास किए गए प्रारंभिक मान को अनदेखा करता है, लेकिन यहां प्रारंभिक मान अभी भी फिर से गणना की जा रही है। यदि हम बड़ी सरणियाँ बना रहे हैं या भारी गणना कर रहे हैं तो यह महंगा हो सकता है।

हम पास करके इस मुद्दे को हल कर सकते हैं आइटम प्राप्त करें एक _ के रूप में प्रारंभकर्ता _ समारोह।

अब, कोड में एक छोटा सा बदलाव करते हैं।

const [items, setItems] = useState(getItems);

प्रारंभकर्ता समारोह के साथ

CodeSandbox में कंसोल विंडो देखें। ध्यान दें कि "getItems कॉल" लॉग केवल पहले रेंडर पर मुद्रित होता है। जब बाद के आइटम जोड़े जाते हैं तो यह लॉग नहीं होता है।

हालांकि दो उदाहरणों के बीच कोई दृश्य अंतर नहीं है, प्रदर्शन के मामले में वे अलग हैं।

याद रखें कि जब आपको प्रारंभिक स्थिति के लिए किसी फ़ंक्शन की आवश्यकता होती है, तो फ़ंक्शन को हमेशा पास करें या फ़ंक्शन को किसी अन्य फ़ंक्शन के अंदर कॉल करें। फ़ंक्शन को सीधे कॉल न करें।

✅ const [items, setItems] = useState(getItems);
✅ const [items, setItems] = useState(() => getItems());
❌ const [items, setItems] = useState(getItems());

मेरे पास कितने उपयोग स्टेट हुक हो सकते हैं

आपके पास एक घटक के अंदर जितने आवश्यक हो उतने यूज़स्टेट हुक हो सकते हैं।

कोडसैंडबॉक्स देखें

एकाधिक उपयोगराज्य हुक

नीचे दिए गए घटक में तीन अलग-अलग अवस्थाएँ हैं - उपयोगकर्ता नाम, पासवर्ड, KeepMeSignedIn।

उपयोगकर्ता नाम के मान अपडेट करने का प्रयास करें, KeepMeSignedIn. जब लॉगिन बटन पर क्लिक किया जाता है तो अपडेट की गई स्थिति कंसोल में लॉग हो जाती है।

हाइलाइट

• useState एक री-रेंडर को ट्रिगर करने और री-रेंडर के बीच की स्थिति को बनाए रखने के लिए एक तंत्र प्रदान करता है।
• जब आपको आवश्यकता हो तो अपडेटर फ़ंक्शन का उपयोग करें:
  • पिछली स्थिति के आधार पर अगले राज्य की गणना करें।
  • अगले रेंडर से पहले राज्य में कई अपडेट करें।
• यदि किसी फ़ंक्शन से प्रारंभिक स्थिति प्राप्त की जाती है - प्रारंभकर्ता फ़ंक्शन सिंटैक्स का उपयोग करें।
• एक घटक के अंदर कई उपयोग स्टेट हुक हो सकते हैं।

यह पोस्ट पसंद आया? इसे दूसरों के साथ साझा करें।
मेरे निजी ब्लॉग के लिए मूल रूप से लिखा गया है - https://gauravsen.com/use-state-hook