useState के साथ अपने कॉम्पोनेंट को मेमोरी दें ताकि आप ऐसी वैल्यू प्रदर्शित कर सकें जो यूज़र के इंटरैक्ट करते ही बदलती हैं।
इस पाठ को Kodokon में खोलेंएक लाइक काउंटर, किसी सर्च फ़ील्ड में टाइप किया गया टेक्स्ट, एक मेन्यू जो खुलता और बंद होता है: ये सभी वैल्यू ऐप के उपयोग के दौरान बदलती हैं। एक साधारण वेरिएबल पर्याप्त नहीं है, क्योंकि जब यह बदलता है तो React स्क्रीन को रिफ़्रेश नहीं करता। आपको वह चाहिए जिसे स्टेट कहा जाता है: मेमोरी जो कॉम्पोनेंट की अपनी होती है। आप इसे useState से बनाते हैं, एक hook, यानी React द्वारा प्रदान किया गया एक विशेष फ़ंक्शन जिसका नाम use से शुरू होता है।
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}आइए मुख्य लाइन का विश्लेषण करें: const [count, setCount] = useState(0);। useState(0) प्रारंभिक वैल्यू 0 के साथ एक स्टेट बनाता है और दो एलिमेंट का एक ऐरे लौटाता है, जिसे आप डीस्ट्रक्चरिंग के माध्यम से पकड़ते हैं: count वर्तमान वैल्यू है, और setCount अपडेट फ़ंक्शन है, उस वैल्यू को बदलने का एकमात्र अनुमत तरीका। यहाँ, onClick हर क्लिक पर setCount(count + 1) को ट्रिगर करता है (हम अगले पाठ में इवेंट को विस्तार से कवर करेंगे)।
import { useState } from "react";
function NameInput() {
const [name, setName] = useState("");
return (
<div>
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Hello, {name}!</p>
</div>
);
}जब आप setName को कॉल करते हैं, तो React दो काम करता है: यह नई वैल्यू को संग्रहित करता है, फिर यह आउटपुट को फिर से गणना करने के लिए आपके कॉम्पोनेंट फ़ंक्शन को फिर से चलाता है। इसे re-render कहा जाता है। यही कारण है कि Hello, {name}! पैराग्राफ हर टाइप किए गए अक्षर के साथ अपने आप अपडेट होता है: आप परिणाम का वर्णन करते हैं, React बाकी संभालता है।
useState(0) कॉल क्या लौटाता है?