React-ലെ useState ഉപയോഗിക്കുന്നതിനുള്ള ഗൈഡ്
നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ നിങ്ങളുടെ പാസ്വേഡ് ബാർ 'weak' എന്നതിൽ നിന്ന് 'strong' എന്നതിലേക്ക് മാറുന്നു. സ്റ്റേറ്റ് (state) വഴി നിങ്ങൾ ടൈപ്പ് ചെയ്യുന്നത് React ഓർത്തു വെക്കുന്നു.
സ്റ്റേറ്റ് ഡാറ്റ സംഭരിച്ചു വെക്കുന്നു. നിങ്ങൾ ടൈപ്പ് ചെയ്യുന്നതോ ക്ലിക്ക് ചെയ്യുന്നതോ ആയ കാര്യങ്ങൾ ഇത് ട്രാക്ക് ചെയ്യുന്നു.
നിങ്ങൾ നിങ്ങളുടെ പേര് ടൈപ്പ് ചെയ്യുന്നു എന്ന് സങ്കൽപ്പിക്കുക.
- നിങ്ങളുടെ തുടക്കത്തിലുള്ള സ്റ്റേറ്റ് ഒരു ശൂന്യമായ സ്ട്രിംഗ് (empty string) ആണ്.
- നിങ്ങൾ J എന്ന് ടൈപ്പ് ചെയ്യുന്നു.
- "" എന്നതിൽ നിന്ന് "J" എന്നതിലേക്ക് സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യാൻ നിങ്ങൾ ഒരു ഫംഗ്ഷൻ വിളിക്കുന്നു.
- നിങ്ങൾ o എന്ന് ടൈപ്പ് ചെയ്യുന്നു.
- സ്റ്റേറ്റ് "Jo" എന്നാക്കാൻ നിങ്ങൾ ഫംഗ്ഷൻ വിളിക്കുന്നു.
ഓരോ തവണ നിങ്ങൾ സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുമ്പോഴും, React UI വീണ്ടും റെൻഡർ (re-render) ചെയ്യുന്നു. റെൻഡറിംഗ് എന്നാൽ React പഴയ വ്യൂ നീക്കം ചെയ്യുകയും നിങ്ങളുടെ അപ്ഡേറ്റ് ചെയ്ത ഡാറ്റ ഉപയോഗിച്ച് പുതിയൊരു വ്യൂ വരയ്ക്കുകയും ചെയ്യുന്നു എന്നാണ് അർത്ഥം.
എന്തുകൊണ്ട് സാധാരണ വേരിയബിളുകൾ ഉപയോഗിക്കരുത്? ഒരു സാധാരണ വേരിയബിൾ നിങ്ങളുടെ കോഡിൽ മാറുമെങ്കിലും സ്ക്രീനിൽ മാറ്റം വരുത്തില്ല. നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് പഴയ ഡാറ്റ മാത്രമേ കാണാൻ കഴിയൂ. നിങ്ങളുടെ ഡാറ്റയെ UI-യുമായി ബന്ധിപ്പിക്കുന്നതിലൂടെ React state ഈ പ്രശ്നം പരിഹരിക്കുന്നു.
useState എങ്ങനെ ഉപയോഗിക്കാം:
React-ൽ നിന്ന് ഇത് ഇംപോർട്ട് ചെയ്യുക.
import { useState } from 'react';ഇത് ഡിക്ലയർ ചെയ്യുക.
const [age, setAge] = useState(20);
ഈ ഉദാഹരണത്തിൽ:
- age എന്നത് നിങ്ങളുടെ നിലവിലെ മൂല്യമാണ്.
- setAge എന്നത് മൂല്യം മാറ്റുന്നതിനുള്ള ഫംഗ്ഷനാണ്.
- 20 എന്നത് നിങ്ങളുടെ തുടക്ക മൂല്യമാണ്.
ഇത് ഇപ്പോൾ തന്നെ പരീക്ഷിച്ചു നോക്കൂ. ഒരു React പ്രോജക്റ്റ് തുറക്കുക. ഒരു കൗണ്ടർ നിർമ്മിക്കുക. കൗണ്ട് അപ്ഡേറ്റ് ചെയ്യാൻ ഒരു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക. സ്ക്രീൻ പെട്ടെന്ന് മാറുന്നത് കാണാം.
സ്രോതസ്സ്: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i