Reactలో useState గైడ్
మీరు టైప్ చేస్తున్న కొద్దీ మీ పాస్వర్డ్ బార్ 'weak' నుండి 'strong'గా మారుతుంది. React మీ టైపింగ్ను state ద్వారా గుర్తుంచుకుంటుంది.
State డేటాను కలిగి ఉంటుంది. మీరు ఏమి టైప్ చేస్తున్నారు లేదా దేనిని క్లిక్ చేస్తున్నారు అనే అంశాన్ని ఇది ట్రాక్ చేస్తుంది.
మీరు మీ పేరును టైప్ చేస్తున్నారని ఊహించుకోండి.
- మీ ప్రారంభ state ఒక ఖాళీ స్ట్రింగ్ (empty string).
- మీరు J అని టైప్ చేస్తారు.
- "" నుండి "J" కి stateని అప్డేట్ చేయడానికి మీరు ఒక ఫంక్షన్ను పిలుస్తారు.
- మీరు o అని టైప్ చేస్తారు.
- stateని "Jo"గా మార్చడానికి మీరు ఆ ఫంక్షన్ను పిలుస్తారు.
మీరు ప్రతిసారీ stateని అప్డేట్ చేసినప్పుడు, React UIని re-render చేస్తుంది. Re-rendering అంటే React పాత వ్యూని క్లియర్ చేసి, మీ అప్డేట్ చేసిన డేటాతో కొత్త వ్యూని ప్రదర్శించడం.
సాధారణ వేరియబుల్స్ను ఎందుకు ఉపయోగించకూడదు? ఒక సాధారణ వేరియబుల్ మీ కోడ్లో మారుతుంది కానీ స్క్రీన్ను అప్డేట్ చేయదు. మీ వినియోగదారులు పాత డేటినే చూస్తారు. React state మీ డేటాను మీ UIకి అనుసంధానించడం ద్వారా ఈ సమస్యను పరిష్కరిస్తుంది.
useStateని ఎలా ఉపయోగించాలి:
React నుండి దీనిని ఇంపోర్ట్ చేయండి.
import { useState } from 'react';దీనిని డిక్లేర్ చేయండి.
const [age, setAge] = useState(20);
ఈ ఉదాహరణలో:
- age అనేది మీ ప్రస్తుత విలువ.
- setAge అనేది విలువను మార్చడానికి ఉపయోగించే ఫంక్షన్.
- 20 అనేది మీ ప్రారంభ విలువ.
ఇప్పుడే దీన్ని ప్రయత్నించండి. ఒక React ప్రాజెక్ట్ను ఓపెన్ చేయండి. ఒక కౌంటర్ (counter)ను సృష్టించండి. కౌంట్ను అప్డేట్ చేయడానికి ఒక బటన్ను క్లిక్ చేయండి. స్క్రీన్ వెంటనే ఎలా మారుతుందో చూడండి.
మూలం: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i