React ஒரு component-க்குள் தரவை (data) உயிர்ப்புடன் வைத்திருக்க இரண்டு வழிகளை வழங்குகிறது: useState மற்றும் useRef. மேலோட்டமாகப் பார்க்கும்போது இவை இரண்டும் ஒரே மாதிரியாகத் தோன்றும். இரண்டும் நீங்கள் வாசிக்கக்கூடிய ஒன்றை வழங்குகின்றன, இரண்டும் re-renders-களின் போது அழியாமல் இருக்கும், மேலும் இரண்டும் ஒரு கிளிக் முதல் அடுத்த கிளிக் வரை ஒரு மதிப்பை நினைவில் கொள்ள அனுமதிக்கின்றன. ஆனால் தவறான ஒன்றைத் தேர்ந்தெடுத்தால், திரையில் மாற்றம் தெரியாமல் போகலாம் அல்லது தேவையற்ற re-renders-களின் தொடர்ச்சியான ஓட்டம் ஏற்படலாம். இந்தத் தேர்வு என்பது syntax-ஐப் பற்றியது அல்ல. மாறாக, React அந்த மாற்றத்தை அறிய வேண்டுமா இல்லையா என்பதைப் பற்றியது.

ஒவ்வொரு Hook-உம் உண்மையில் என்ன செய்கிறது

useState என்பது ஒரு component-உடன் தொடர்புகொள்வதற்கான React-ன் அதிகாரப்பூர்வ வழியாகும். நீங்கள் அதை அழைக்கும்போது, ஒரு மதிப்பு (value) மற்றும் ஒரு setter function ஆகியவற்றை நீங்கள் பெறுவீர்கள். அந்த மதிப்பை component-ன் அடையாளத்தின் ஒரு பகுதியாக React கண்காணிக்கிறது. Setter இயங்கும்போது, "ஏதோ ஒன்று மாறியுள்ளது" என்று React கூறிக்கொண்டு, திரை அந்த மாற்றத்தைப் பிரதிபலிக்க ஒரு புதிய render-ஐத் திட்டமிடுகிறது.

மறுபுறம், useRef என்பது current என்ற property கொண்ட ஒரு சாதாரண JavaScript object மட்டுமே. ஒவ்வொரு render-இன் போதும் அதே object reference-ஐ உங்களுக்கு வழங்குவதாக React உறுதியளிக்கிறது. அதன் உள்ளே என்ன இருக்கிறது என்பதை அது கவனிப்பதில்லை. someRef.current-ஐ மாற்றுவது அமைதியாக நடக்கும். React அதைத் தெரிந்துகொள்ளாது.

அந்த அமைதிதான் இதன் முக்கிய நோக்கமே. Refs என்பது ஒரு 'escape hatch' போன்றது, அது state-க்கு மாற்றாகாது.

Rendering வேறுபாடு

நீங்கள் state-ஐ மாற்றினால், component மீண்டும் render ஆகும். ஆரம்பநிலைப் பயனர்கள் எதிர்பார்க்கும் நடத்தை இதுதான், மேலும் புதிய தரவு திரையில் தோன்ற வேண்டும் என்று நீங்கள் விரும்பும்போது இதுவே சரியான வழியாகும். ஒரு counter, ஒரு form field, அல்லது பெறப்பட்ட பயனர்களின் பட்டியல் (fetched list of users)—பயனர் அதைத் திரையில் பார்க்க வேண்டும் என்றால், அது பெரும்பாலும் state-ல் இருக்க வேண்டும். state மாற்றங்கள் DOM-ஐ sync செய்ய renderer-க்குத் தெரியப்படுத்துகிறது என்ற கருத்தை வைத்தே React-ன் முழு தரவு ஓட்டமும் (data flow) கட்டமைக்கப்பட்டுள்ளது.

நீங்கள் ஒரு ref-ஐ மாற்றினால், காட்சி ரீதியாக (visually) எதுவும் நடக்காது. மாறி (variable) உடனடியாகவும், synchronous ஆகவும் புதுப்பிக்கப்படும், ஆனால் component மீண்டும் render ஆகாது. இது, ஒரு component-ன் உள் செயல்பாடுகளுக்குத் தேவையான, ஆனால் காட்சி வெளியீட்டில் (visual output) இடம்பெறத் தேவையில்லாத மதிப்புகளுக்கு refs-ஐச் சிறந்ததாக மாற்றுகிறது. Timer IDs, முந்தைய prop snapshots, அல்லது நேரடி DOM handles போன்றவற்றை இதற்கு உதாரணமாகக் கொள்ளலாம். ஒரு carousel autoplay-ஐ இயக்கும் interval ID-யைப் பற்றி UI கவலைப்படாது; எந்த slide கண்ணுக்குத் தெரிகிறது என்பதை மட்டுமே அது கவனிக்கும். எனவே, interval ID ஒரு ref-ல் இருக்க வேண்டும்.

State எப்போது சரியான கருவியாகும்

ஒரு மதிப்பு உங்கள் UI-ன் மேற்பரப்பில் (surface) ஒரு பகுதியாக இருக்கும்போது எப்போது வேண்டுமானாலும் useState-ஐப் பயன்படுத்தவும்.

Input fields இதற்குத் தெளிவான உதாரணம். ஒரு பயனர் மின்னஞ்சல் முகவரியைத் தட்டச்சு செய்யும் போது, அதைச் சரிபார்த்து (validate) பெட்டிக்குக் கீழே ஒரு பிழைச் செய்தியைக் (error message) காட்ட வேண்டும் என்றால், அந்த மின்னஞ்சல் string-க்கு state தேவை. அந்த validation logic மற்றும் error banner ஆகிய இரண்டும் சமீபத்திய மதிப்பைச் சார்ந்தே இருக்கும், மேலும் state ஒரு re-render-ஐத் தூண்டுவதால் மட்டுமே React அந்த banner-ஐப் புதுப்பிக்கத் தெரியும்.

Counts மற்றும் toggles என்பவை மற்ற முக்கியமான பயன்பாடுகள். ஒரு மதிப்பை (score) அதிகரிக்கும் button, ஒரு modal open/close flag, அல்லது ஒரு tab index—இவை அனைத்தும் state வழியாகவே இயங்குகின்றன, ஏனெனில் மதிப்போடு சேர்ந்து render வெளியீடும் மாறுகிறது. ஒரு search string-ஐப் பொறுத்து மாறும் filtered list போன்ற derived values கூட பொதுவாக state-லிருந்துதான் தொடங்குகின்றன, ஏனெனில் அதன் மூல மதிப்பு (source value) பயனருக்குத் தெரியும்.

இங்கு புரிந்துகொள்ள வேண்டிய ஒரு கால அளவு நுணுக்கமும் (timing nuance) உள்ளது. State updates ஆகியவை asynchronous மற்றும் batched முறையில் நடக்கும். ஒரு event handler-க்குள் நீங்கள் setCount(count + 1) என்பதை மூன்று முறை அழைத்தால், React மூன்று முறை render செய்யாது. அது அவற்றை ஒரே update-ஆகக் குழுவாக்கும் (batch). உங்கள் running function-க்குள் இருக்கும் count என்ற மாறி அடுத்த render வரும் வரை பழைய நிலையிலேயே இருக்கும். இந்த batching என்பது ஒரு வசதியாகும் (feature). இது செயலிகளை வேகமாக வைத்திருக்க உதவுகிறது. ஆனால், அடுத்த வரியிலேயே state மாறி புதிய மதிப்பைத் தரும் என்று நீங்கள் எதிர்பார்க்க முடியாது.

Refs எப்போது உதவும்

Plumbing போன்ற உள் வேலைகளுக்கு useRef-ஐப் பயன்படுத்தவும், ஆனால்