React 19 නව hook එක useActionState හඳුන්වා දී, පරණ ෆෝම් පරිපාලන පදිංචි ක්රමය සම්පූර්ණයෙන්ම වෙනස් කරලා. පෙරදී අපි තිදෙනෙකුගේ state (ප්රතිඵල, සබමිට් වෙමින්ද, දෝෂය) හසුරවා, බොත්තම අක්රීය කිරීමේදී මැදහත් නොවූ තත්ත්වයක් නිසා බොත්තම නැවත සක්රිය නොවී පණිවිඩයක් මතක තබාගන්නා සිදුවීම් තිබුණා.
ඉතා වේගවත් අන්තර්ජාලයක් තියෙන විට එය සැලකිල්ලට නොගැන්වෙයි, නමුත් අඩු වේගයක් හෝ අස්ථිර සම්බන්ධතාවයක් ඇති වේලාවේ, local pending flag එක ඉක්මනින් false වෙලා, බොත්තම නැවත සක්රිය වෙයි. පරිශීලකයා “Place Order” බොත්තම තවත් තවත් ක්ලික් කරන විට, React ඒ සියල්ලක් අනුක්රමයෙන් queue කර, එක් එක් ඉල්ලීමක් පසුපසට ක්රියාත්මක කරයි. ඒ නිසා එකම ඇණවුමක් නොව, තුනක් හෝ වැඩි ගණනක් ඇණවුම් සිදුවේ.
useActionState මෙය සරල කරයි. එය const [state, formAction, isPending] = useActionState(fn, initialState); ලෙස භාවිතා කරයි. ඔබට action function එකක් (fn) ලබා දී, ඒකේ පසුබැසීමේ ලොජික් ලියන්න. React ස්වයංක්රීයව isPending flag එක පාලනය කරන නිසා, බොත්තම disable/enable කිරීමේ අසාර්ථකතාව අතහැර දැමිය හැක.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ බොහෝ වෙබ් සංවර්ධකයින්, startup කණ්ඩායම්, සහ ආයතනික IT දෙපාර්තමේන්තුවලට මෙම hook එකේ ප්රයෝජන විශාලයි.
- දෝෂ රහිත පරිශීලක අත්දැකීම – දෙවරක් submit කිරීම නිසා සිදුවන අයවැය හා ගැටළු ඉවත් වේ.
- කොඩ් පිරිසිදු කිරීම – තනි state එකක්, එකම action function එකක් භාවිතා කිරීම නිසා කේතය කෙටි හා පැහැදිලි වේ.
- වේගවත් සංවර්ධනය – තනි flag එකකට බදා නොදෙයි; React හි transition tracking එක භාවිතා කරයි.
- ඉගෙනුම් අවස්ථා – නව hook එක භාවිතා කිරීම, modern React patterns ඉගෙන ගැනීමට හොඳ උදාහරණයක්.
මෙම hook එකේ ප්රයෝජන ගැන දැනගෙන, ශ්රී ලංකාවේ dev community එකේ code quality, performance, සහ user experience මට්ටම ඉහළ යාමට ඉඩ සලසයි.
අවසානයේ, useActionState ඔබේ ෆෝම් ලොජික් එකේ අඩුපාඩු ඉවත් කර, React 19 සමඟ වැඩ කරන ඕනෑම ව්යාපෘතියක් සඳහා අත්යවශ්ය මෙවලමක් බව පෙනේ.
