React मधील useState मार्गदर्शक
तुम्ही टाईप करत असताना तुमचा पासवर्ड बार 'weak' कडून 'strong' मध्ये बदलतो. React तुमच्या टाईपिंगला state द्वारे लक्षात ठेवते.
State डेटा साठवते. तुम्ही काय टाईप करता किंवा क्लिक करता यावर ते लक्ष ठेवते.
समजा तुम्ही तुमचे नाव टाईप करत आहात.
- तुमची सुरुवातीची state एक रिकामी स्ट्रिंग (empty string) आहे.
- तुम्ही J टाईप करता.
- "" कडून "J" पर्यंत state अपडेट करण्यासाठी तुम्ही एक function कॉल करता.
- तुम्ही o टाईप करता.
- state "Jo" मध्ये बदलण्यासाठी तुम्ही function कॉल करता.
प्रत्येक वेळी तुम्ही state अपडेट करता, तेव्हा React UI पुन्हा रेंडर (re-render) करते. Re-rendering म्हणजे React जुना व्ह्यू (view) काढून टाकते आणि तुमच्या अपडेटेड डेटासह नवीन व्ह्यू तयार करते.
नियमित व्हेरिएबल्स (regular variables) का वापरू नयेत? एक नियमित व्हेरिएबल तुमच्या कोडमध्ये बदलते पण स्क्रीन अपडेट करत नाही. तुमचे युजर्सना जुना डेटा दिसेल. React state तुमच्या डेटाला तुमच्या UI शी जोडून ही समस्या सोडवते.
useState कसे वापरावे:
React मधून ते इम्पोर्ट करा.
import { useState } from 'react';ते डिक्लेअर करा.
const [age, setAge] = useState(20);
या उदाहरणात:
- age ही तुमची सध्याची व्हॅल्यू आहे.
- setAge हे व्हॅल्यू बदलण्यासाठीचे function आहे.
- 20 ही तुमची सुरुवातीची व्हॅल्यू आहे.
हे आताच करून पहा. एक React प्रोजेक्ट उघडा. एक काउंटर तयार करा. काउंट अपडेट करण्यासाठी बटणावर क्लिक करा. स्क्रीन लगेच बदलताना पहा.
स्त्रोत: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i