ReactJS मधील useState हुक: एक संपूर्ण मार्गदर्शक

ReactJS ही एक लोकप्रिय JavaScript लायब्ररी आहे जी वेब अॅप्लिकेशन्स तयार करण्यासाठी वापरली जाते. ReactJS मध्ये, कॉम्पोनन्ट्स ही एकत्रितपणे काम करणारी कोड ब्लॉक्स असतात जी तुमच्या यूजर इंटरफेसला परिभाषित करतात. या कॉम्पोनन्ट्समध्ये स्टेट (राज्य) असू शकते, जी कॉम्पोनन्टची आंतरिक स्थिती दर्शवते. ReactJS मध्ये स्टेट व्यवस्थापनासाठी useState हुक वापरला जातो. चला तर मग useState हुक कसा वापरायचा हे पाहू या.

useState हुक म्हणजे काय?

useState हुक हा ReactJS चा एक इनबिल्ट हुक आहे, जो फंक्शनल कॉम्पोनन्ट्समध्ये स्टेट व्यवस्थापित करण्यासाठी वापरला जातो. हा हुक दोन गोष्टी परत करतो: स्टेट व्हॅल्यू आणि त्याला अपडेट करण्यासाठीची फंक्शन.

useState हुक कसा वापरायचा?

1. ReactJS आणि useState इम्पोर्ट करा:

import React, { useState } from 'react';

1. useState हुक वापरून स्टेट डिफाइन करा:

function Counter() { const [count, setCount] = useState(0); return ( <div> <p>तुमचं काउंट: {count}</p> <button onClick={() => setCount(count + 1)}>काउंट वाढवा</button> </div> ); }

उदाहरणाचा स्पष्टीकरण:

वरील उदाहरणात, आपण एक साधी काउंटर कॉम्पोनन्ट तयार केली आहे. चला तर मग या कोडचे तपशीलवार स्पष्टीकरण पाहू.

1. इम्पोर्ट स्टेटमेंट:import React, { useState } from 'react';React आणि useState हुक इम्पोर्ट केले आहेत.
2. स्टेट डिफाइन करणे:const [count, setCount] = useState(0);येथे count ही स्टेट व्हॅल्यू आहे आणि setCount ही त्याला अपडेट करण्यासाठीची फंक्शन आहे. useState(0) ने प्रारंभिक स्टेट 0 सेट केली आहे.
3. स्टेट रेंडर करणे:<p>तुमचं काउंट: {count}</p>count व्हॅल्यू रेंडर केली आहे, ज्यामुळे यूजरला काउंट दिसतो.
4. स्टेट अपडेट करणे:<button onClick={() => setCount(count + 1)}>काउंट वाढवा</button>या बटणावर क्लिक केल्यास setCount फंक्शनद्वारे count वाढते.

useState च्या काही महत्त्वाच्या गोष्टी:

• मल्टीपल स्टेट: तुम्ही एकाच कॉम्पोनन्टमध्ये मल्टीपल useState हुक्स वापरू शकता:const [name, setName] = useState(''); const [age, setAge] = useState(0);
• ऑब्जेक्ट किंवा अ‍ॅरे स्टेट: useState हुकसह ऑब्जेक्ट किंवा अ‍ॅरे देखील स्टेट म्हणून वापरता येते:const [user, setUser] = useState({ name: '', age: 0 });

निष्कर्ष:

ReactJS मधील useState हुक फंक्शनल कॉम्पोनन्ट्समध्ये स्टेट व्यवस्थापनासाठी अत्यंत सोपा आणि प्रभावी आहे. तुम्ही जसे-जसे ReactJS मध्ये कार्य कराल, तसतसे तुम्हाला useState हुकच्या वापराचे अधिक चांगले समज येईल आणि तुम्ही अधिक प्रगत स्टेट व्यवस्थापनासाठी तयार व्हाल. या मार्गदर्शकाने तुम्हाला useState हुक कसा वापरायचा हे समजून घेण्यास मदत केली असेल अशी आशा आहे.