React માં useState માટેની માર્ગદર્શિકા
જેમ તમે ટાઈપ કરો છો તેમ તમારું પાસવર્ડ બાર 'weak' થી 'strong' માં બદલાય છે. React સ્ટેટ (state) દ્વારા તમારા ટાઈપિંગને યાદ રાખે છે.
State ડેટા ધરાવે છે. તમે શું ટાઈપ કરો છો અથવા ક્લિક કરો છો તેનો તે ટ્રેક કરે છે.
કલ્પના કરો કે તમે તમારું નામ ટાઈપ કરો છો.
- તમારું શરૂઆતી state એક ખાલી સ્ટ્રિંગ (empty string) છે.
- તમે J ટાઈપ કરો છો.
- તમે "" થી "J" માં state અપડેટ કરવા માટે એક ફંક્શન કોલ કરો છો.
- તમે o ટાઈપ કરો છો.
- તમે state ને "Jo" માં બદલવા માટે ફંક્શન કોલ કરો છો.
જ્યારે પણ તમે 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 એ કિંમત બદલવા માટેનું ફંક્શન છે.
- 20 એ તમારી શરૂઆતી કિંમત છે.
અત્યારે જ આ પ્રયત્ન કરો. એક React પ્રોજેક્ટ ખોલો. એક કાઉન્ટર (counter) બનાવો. કાઉન્ટ અપડેટ કરવા માટે બટન પર ક્લિક કરો. સ્ક્રીન તરત જ બદલાતી જુઓ.
સ્ત્રોત: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i