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

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

June 16, 2024
4 min read
9 views
ClickSkills Team
ProgrammingMarathiusestateहुककसा

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

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

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

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

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

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

उदाहरणार्थ:

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

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

return (

Count: {count}

); }

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 (

setText(e.target.value)} />

Entered Text: {text}

); }

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 (

setName(e.target.value)} /> setAge(parseInt(e.target.value))} />

Name: {name}

Age: {age}

); }

export default UserProfile; ```

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

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

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

फायदे:

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

तोटे:

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

निष्कर्ष

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

Published on June 16, 2024• Updated on July 14, 2025
Word count: 7734 min read

Join the Discussion

काय शिकावे कळत नाहीये?काळजी करू नका आम्ही तुम्हाला मदत करूमला मदत हवी आहे