रिऍक्ट ही जावास्क्रिप्ट लायब्ररी आहे जी वेब डेव्हलपमेंटसाठी वापरली जाते. रिऍक्टच्या कॉम्पोनेंट्समध्ये स्टेट मॅनेजमेंट करणे हे एक महत्त्वपूर्ण कार्य आहे. `useState` हा रिऍक्टचा एक हुक आहे जो फंक्शनल कॉम्पोनेंट्समध्ये स्टेट मॅनेज करण्यासाठी वापरला जातो. या ब्लॉगमध्ये आपण `useState` हुक कसा वापरायचा हे तपशीलवार पाहूया आणि काही उदाहरणे देखील पाहूया.
`useState` हा एक हुक आहे जो रिऍक्टमध्ये स्टेट व स्टेट अपडेट फंक्शन प्रदान करतो. हे फंक्शनल कॉम्पोनेंट्समध्ये वापरले जाते आणि स्टेट मॅनेज करण्यासाठी एक सोपी पद्धत आहे.
`useState` हुक वापरण्यासाठी, आपण रिऍक्ट लायब्ररीमधून `useState` हुक आयात करावा लागेल. त्यानंतर, आपण आपल्या कॉम्पोनेंटमध्ये `useState` हुक कॉल करून स्टेट व स्टेट अपडेट फंक्शन तयार करू शकता.
उदाहरणार्थ:
```javascript import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0);
return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); }
export default Counter; ```
वरील उदाहरणात, `useState` हुकचा वापर करून `count` नावाची स्टेट व `setCount` नावाचे स्टेट अपडेट फंक्शन तयार केले आहे. `count` चे प्रारंभिक मूल्य 0 आहे. बटण क्लिक केल्यावर, `setCount` फंक्शनचा वापर करून `count` वाढवले जाते.
खालील उदाहरणात, `useState` हुकचा वापर करून टेक्स्ट इनपुटचे स्टेट मॅनेज केले आहे.
```javascript import React, { useState } from 'react';
function TextInput() { const [text, setText] = useState('');
return ( <div> <input type="text" value={text} onChange={(e) => setText(e.target.value)} /> <p>Entered Text: {text}</p> </div> ); }
export default TextInput; ```
वरील उदाहरणात, `text` नावाची स्टेट व `setText` नावाचे स्टेट अपडेट फंक्शन तयार केले आहे. इनपुट फील्डमध्ये काहीही टाईप केल्यावर `setText` फंक्शनचा वापर करून `text` अपडेट केले जाते.
खालील उदाहरणात, `useState` हुकचा वापर करून टॉगल बटन तयार केले आहे.
```javascript import React, { useState } from 'react';
function ToggleButton() { const [isOn, setIsOn] = useState(false);
return ( <div> <button onClick={() => setIsOn(!isOn)}> {isOn ? 'ON' : 'OFF'} </button> </div> ); }
export default ToggleButton; ```
वरील उदाहरणात, `isOn` नावाची स्टेट व `setIsOn` नावाचे स्टेट अपडेट फंक्शन तयार केले आहे. बटण क्लिक केल्यावर `isOn` चे मूल्य उलटवले जाते.
`useState` हुकचा वापर करून आपण एकाच कॉम्पोनेंटमध्ये अनेक स्टेट्स देखील मॅनेज करू शकतो. खालील उदाहरणात, `useState` हुकचा वापर करून दोन वेगवेगळ्या स्टेट्स मॅनेज केल्या आहेत.
```javascript import React, { useState } from 'react';
function UserProfile() { const [name, setName] = useState(''); const [age, setAge] = useState(0);
return ( <div> <input type="text" placeholder="Enter your name" value={name} onChange={(e) => setName(e.target.value)} /> <input type="number" placeholder="Enter your age" value={age} onChange={(e) => setAge(parseInt(e.target.value))} /> <p>Name: {name}</p> <p>Age: {age}</p> </div> ); }
export default UserProfile; ```
वरील उदाहरणात, `name` आणि `age` या दोन स्टेट्स व त्यांचे स्टेट अपडेट फंक्शन्स तयार केले आहेत. इनपुट फील्डमध्ये दिलेल्या मूल्यांच्या आधारे स्टेट्स अपडेट केल्या जातात.
`useState` हुकचा वापर फंक्शनल कॉम्पोनेंट्समध्ये स्टेट मॅनेज करण्यासाठी केला जातो. क्लास बेस्ड कॉम्पोनेंट्सच्या तुलनेत, फंक्शनल कॉम्पोनेंट्स अधिक साधे व सोपे असतात. त्यामुळे, स्टेट मॅनेजमेंट सुलभ होण्यासाठी `useState` हुकचा वापर केला जातो.
1. साधेपणा: `useState` हुक वापरून स्टेट मॅनेज करणे क्लास बेस्ड कॉम्पोनेंट्सपेक्षा अधिक सोपे असते. 2. कोडची स्वच्छता: फंक्शनल कॉम्पोनेंट्समधील कोड क्लास बेस्ड कॉम्पोनेंट्सपेक्षा अधिक स्वच्छ व सुलभ असतो. 3. सोपी स्टेट अपडेट्स: `useState` हुक वापरून स्टेट अपडेट करणे खूप सोपे असते.
1. कॉम्प्लेक्स स्टेट मॅनेजमेंट: अत्यंत कॉम्प्लेक्स स्टेट्स मॅनेज करण्यासाठी कधी कधी क्लास बेस्ड कॉम्पोनेंट्स अधिक योग्य ठरतात. 2. कॉम्पोनेंट रीरेंडरिंग: स्टेट अपडेट्समुळे कॉम्पोनेंट वारंवार रीरेंडर होऊ शकतो, ज्यामुळे परफॉर्मन्सवर परिणाम होऊ शकतो.
`useState` हुक हा रिऍक्टमध्ये फंक्शनल कॉम्पोनेंट्ससाठी स्टेट मॅनेज करण्याचा एक अत्यंत सोपा व प्रभावी मार्ग आहे. या ब्लॉगमध्ये आपण `useState` हुकचा वापर कसा करायचा हे पाहिले आणि त्याचे विविध उदाहरणे देखील पाहिले. `useState` हुक वापरून आपण आपल्या रिऍक्ट अॅप्लिकेशनमध्ये स्टेट मॅनेजमेंट सुलभ व सुलभ करू शकतो. जर आपण रिऍक्टमध्ये फंक्शनल कॉम्पोनेंट्स वापरत असाल, तर `useState` हुकचा वापर करून स्टेट मॅनेज करण्याचा नक्की विचार करा.