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

रिऍक्ट ही जावास्क्रिप्ट लायब्ररी आहे जी वेब डेव्हलपमेंटसाठी वापरली जाते. रिऍक्टच्या कॉम्पोनेंट्समध्ये स्टेट मॅनेजमेंट करणे हे एक महत्त्वपूर्ण कार्य आहे. `useState` हा रिऍक्टचा एक हुक आहे जो फंक्शनल कॉम्पोनेंट्समध्ये स्टेट मॅनेज करण्यासाठी वापरला जातो. या ब्लॉगमध्ये आपण `useState` हुक कसा वापरायचा हे तपशीलवार पाहूया आणि काही उदाहरणे देखील पाहूया.

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

`useState` हा एक हुक आहे जो रिऍक्टमध्ये स्टेट व स्टेट अपडेट फंक्शन प्रदान करतो. हे फंक्शनल कॉम्पोनेंट्समध्ये वापरले जाते आणि स्टेट मॅनेज करण्यासाठी एक सोपी पद्धत आहे.

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

`useState` हुक वापरण्यासाठी, आपण रिऍक्ट लायब्ररीमधून `useState` हुक आयात करावा लागेल. त्यानंतर, आपण आपल्या कॉम्पोनेंटमध्ये `useState` हुक कॉल करून स्टेट व स्टेट अपडेट फंक्शन तयार करू शकता.

उदाहरणार्थ:

```javascript import React, { useState } from 'react';

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

return (

export default Counter; ```

वरील उदाहरणात, `useState` हुकचा वापर करून `count` नावाची स्टेट व `setCount` नावाचे स्टेट अपडेट फंक्शन तयार केले आहे. `count` चे प्रारंभिक मूल्य 0 आहे. बटण क्लिक केल्यावर, `setCount` फंक्शनचा वापर करून `count` वाढवले जाते.

`useState` हुकचे वापराचे विविध उदाहरणे

1. टेक्स्ट इनपुट मॅनेजमेंट

खालील उदाहरणात, `useState` हुकचा वापर करून टेक्स्ट इनपुटचे स्टेट मॅनेज केले आहे.

```javascript import React, { useState } from 'react';

function TextInput() { const [text, setText] = useState('');

return (

export default TextInput; ```

वरील उदाहरणात, `text` नावाची स्टेट व `setText` नावाचे स्टेट अपडेट फंक्शन तयार केले आहे. इनपुट फील्डमध्ये काहीही टाईप केल्यावर `setText` फंक्शनचा वापर करून `text` अपडेट केले जाते.

2. टॉगल बटन

खालील उदाहरणात, `useState` हुकचा वापर करून टॉगल बटन तयार केले आहे.

```javascript import React, { useState } from 'react';

function ToggleButton() { const [isOn, setIsOn] = useState(false);

return (

export default ToggleButton; ```

वरील उदाहरणात, `isOn` नावाची स्टेट व `setIsOn` नावाचे स्टेट अपडेट फंक्शन तयार केले आहे. बटण क्लिक केल्यावर `isOn` चे मूल्य उलटवले जाते.

3. अनेक स्टेट्स मॅनेजमेंट

`useState` हुकचा वापर करून आपण एकाच कॉम्पोनेंटमध्ये अनेक स्टेट्स देखील मॅनेज करू शकतो. खालील उदाहरणात, `useState` हुकचा वापर करून दोन वेगवेगळ्या स्टेट्स मॅनेज केल्या आहेत.

```javascript import React, { useState } from 'react';

function UserProfile() { const [name, setName] = useState(''); const [age, setAge] = useState(0);

return (

export default UserProfile; ```

वरील उदाहरणात, `name` आणि `age` या दोन स्टेट्स व त्यांचे स्टेट अपडेट फंक्शन्स तयार केले आहेत. इनपुट फील्डमध्ये दिलेल्या मूल्यांच्या आधारे स्टेट्स अपडेट केल्या जातात.

`useState` हुकचा वापर कधी व का करावा?

`useState` हुकचा वापर फंक्शनल कॉम्पोनेंट्समध्ये स्टेट मॅनेज करण्यासाठी केला जातो. क्लास बेस्ड कॉम्पोनेंट्सच्या तुलनेत, फंक्शनल कॉम्पोनेंट्स अधिक साधे व सोपे असतात. त्यामुळे, स्टेट मॅनेजमेंट सुलभ होण्यासाठी `useState` हुकचा वापर केला जातो.

फायदे:

1. साधेपणा: `useState` हुक वापरून स्टेट मॅनेज करणे क्लास बेस्ड कॉम्पोनेंट्सपेक्षा अधिक सोपे असते. 2. कोडची स्वच्छता: फंक्शनल कॉम्पोनेंट्समधील कोड क्लास बेस्ड कॉम्पोनेंट्सपेक्षा अधिक स्वच्छ व सुलभ असतो. 3. सोपी स्टेट अपडेट्स: `useState` हुक वापरून स्टेट अपडेट करणे खूप सोपे असते.

तोटे:

1. कॉम्प्लेक्स स्टेट मॅनेजमेंट: अत्यंत कॉम्प्लेक्स स्टेट्स मॅनेज करण्यासाठी कधी कधी क्लास बेस्ड कॉम्पोनेंट्स अधिक योग्य ठरतात. 2. कॉम्पोनेंट रीरेंडरिंग: स्टेट अपडेट्समुळे कॉम्पोनेंट वारंवार रीरेंडर होऊ शकतो, ज्यामुळे परफॉर्मन्सवर परिणाम होऊ शकतो.

निष्कर्ष

`useState` हुक हा रिऍक्टमध्ये फंक्शनल कॉम्पोनेंट्ससाठी स्टेट मॅनेज करण्याचा एक अत्यंत सोपा व प्रभावी मार्ग आहे. या ब्लॉगमध्ये आपण `useState` हुकचा वापर कसा करायचा हे पाहिले आणि त्याचे विविध उदाहरणे देखील पाहिले. `useState` हुक वापरून आपण आपल्या रिऍक्ट अॅप्लिकेशनमध्ये स्टेट मॅनेजमेंट सुलभ व सुलभ करू शकतो. जर आपण रिऍक्टमध्ये फंक्शनल कॉम्पोनेंट्स वापरत असाल, तर `useState` हुकचा वापर करून स्टेट मॅनेज करण्याचा नक्की विचार करा.