வணக்கம்!
React Developer -களால் பெரும்பாலும் விரும்பப்படும் Component என்றால், அது Functional Components தான். காரணம், இந்த Functional Component உள்ள Hooks சிறப்புகளாகும்.
இந்த Hooks மூலமாக, மிக React Class Components -இல் உள்ள பல்வேறு கடினமான Functionalities-ஐ மிக எளிமையான முறையில் கையாள இயலும்.
React Hooks -ஐப் பொறுத்தவரையில் பல்வேறு Hooks -கள் உள்ளன. அதில் மிக முக்கியமான useState Hooks -களைப் பற்றி, இந்த பதிவில் தெரிந்துக்கொள்ளலாம்.
React useState Hook
React useState Hook ஆனது, ஒரு தகவலை சேகரித்து வைக்கவும், அதை மீண்டும் மீண்டும் பயன்படுத்தவும் பயன்படுகின்ற variable ஆகும். சாதாரணமான variable -களைப்போல் இல்லாமல், பல்வேறு சிறப்பம்சங்களை கொண்டது.
How to use React State Hook?
React State Hook -ஐ பயன்படுத்த முதலில் state -க்கான Library-ஐ பயன்படுத்த விரும்புகின்ற Component -இல் Import செய்துக்கொள்ள வேண்டும்.
 |
| React State Hook |
பிறகு, React State Hook -ஐ Initialize செய்துக்கொள்ள வேண்டும். அதாவது, எந்த value-ஐ store செய்ய பயன்படுத்துகின்றோமோ, அதற்கு தொடர்புடைய name-ஐ கொடுத்து, state உடைய Syntax -இல் கட்டமைக்க வேண்டும்.
 |
| State Syntax |
மேற்கண்ட புகைப்படம் ஆனது State உடைய Syntax ஆகும். கீழ்கண்ட புகைப்படத்தில் உள்ள userDetails என்பது State உடைய பெயராகும். அதனைத்தொடர்ந்துள்ள setUserDetails என்பது userDetails state உடைய Value -ஐ மாற்றியமைக்க பயன்படுத்தப்படும் Function ஆகும்.
 |
| React Hooks |
userDetails அடுத்ததாக உள்ள useState() என்பது, State உடைய Library ஆகும். அதனுள்ளே கொடுக்கப்பட்டுள்ள தகவலானது userDetails உடைய initial value ஆகும்.
குறிப்பு: நாம் மேற்கண்ட State -இல் Object ஆக value -ஐ கொடுத்துள்ளோம். ஆகையால், அந்த State ஆனது Object -இல் கருதப்படும்.
மேற்கண்ட State -ஐ Html (JSX) -இல் கீழ்கண்டவாறு பயன்படுத்தலாம்.
 |
| State Value used on JSX Element |
இந்த State உடைய Values -ஐ புதுப்பிக்க அல்லது மாற்றியமைக்க useState -ஐ கீழ்கண்டவாறு பயன்படுத்தலாம். கீழ்கண்ட புகைப்படத்தின் வாயிலாக, userDetails State உள்ள Object Value ஆனது மாற்றியமைக்கப்படுகிறது.
 |
| State update function |
மேற்கண்ட onChangeState function மூலமாக, setUserDetails function இயக்கப்பட்டு, அதன் மூலமாக userDetails value ஆனது update செய்யப்படுகிறது. இந்த onChangeState function -ஐ தேவையான இடங்களில் call செய்வதன் மூலமாக இயக்கலாம்.
 |
| Function declaration on button |
ஒரு Button component -இல் உள்ள onClick attribute மூலமாக, onChangeState function ஆனது இயக்கப்படுகிறது. இந்த button click செய்வதன் மூலமாக, userDetails value மாற்றியமைக்கப்படும்.
 |
| Functional Component State Initialization |
மேற்கண்ட புகைப்படத்தில், React Functional Component -இல், ஒரு useState() Hook எவ்வாறு பயன்படுத்தப்படுகிறது என்பதை தெரிந்துக்கொள்ளலாம்.
குறிப்பு: மேற்கண்ட புகைப்படத்தில் React.FC என்பது Typescript -இல் Functional component என்பதை குறிக்க பயன்படுத்தப்படும் அம்சமாகும். அடுத்தடுத்த பதிவுகளின் மூலமாக, React JavaScript மற்றும் Typescript பற்றி தெரிந்துக்கொள்ளலாம்.
Browser Result Initial State
 |
| Initial State Result |
மேற்கண்ட புகைப்படமானது, Component -ஐ Load செய்ததும் கிடைக்கப்பெறும் value ஆகும். userDetails State -இல் Inital Value கொடுக்கப்பட்டதால் நேரடியாக Web Browser கிடைக்கப்பெறும் value ஆகும்.
Browser ResultAfter Button onClick
 |
| Updated State Result |
மேற்கண்ட புகைப்படமானது, Button மூலமாக, onChangeState function இயக்கியதால் State உடைய value ஆனது Update seithu பிறகு கிடைக்கப்பெறும் value ஆகும்.
How to Access State using setState()?
பொதுவாக, State -ஐ மட்டுமின்றி setState மூலமாகவும், state உடைய value -ஐ Access செய்ய இயலும். இது பெரும்பாலும், useEffect -இல் State update ஆவதால் ஏற்படும் Re-render issue தவிர்க்க பயன்படுத்தப்படும்.
 |
| useState() Hook Single Value Update |
மேற்கண்ட புகைப்படத்தில் setUserDetails -இல் கொடுக்கப்பட்டுள்ள preValue என்பது, userDetails state -இல் தற்பொழுது சேமிக்கப்பட்டு இருக்கும் value ஆகும். மேற்கண்ட Function -இல் State உடைய value -இல் name -ஐ தவிர்த்து, password மட்டும் update செய்யப்படுகின்றது.
Advantages of useState() Hook
useState() Hook ஆனது பயன்படுத்துவதற்கு மிக எளிதானது. Class Components போன்று அல்லாமல், மிக எளிதாக Initialize செய்து பயன்படுத்தலாம்.
ஒன்றுக்கும் மேற்பட்ட useState() -களை பயன்படுத்தலாம். இதனால் Performance Optimization செய்யப்படும்.
Advantages of useState() Hook
useState() Hook ஆனது Array அல்லது மிகப்பெரிய Object Value -களை கையாள எளிதாக இருந்தாலும், தொடக்கத்தில் கற்றுக்கொள்ள சற்று சிரமாக தெரியும்.
Conclusion
மேற்கண்ட பதிவின் மூலமாக, React உடைய மிக முக்கியமான Hooks -களில் ஒன்றான useState() -ஐப் பற்றி தெரிந்துக்கொண்டோம். அடுத்த பதிவின் மூலமாக, useEffect() பற்றி தெரிந்துக்கொள்ளலாம்.
0 Comments