React යෙදුම් ලියන විට, useEffect එකේ dependency array එකට object එකක් දීලා API fetch කරන කේතයක් ලියන developers බොහොමයක් අසන “loop” ගැටලුවක් අත්විඳිති.
කොඩ් එකේ query වගේ object එකක් සෑදලා dependency ලෙස දුන්නොත්, component එක render වුනාම ඒ object එක නව reference එකකින් නැවත නිර්මාණය වේ. React එක Object.is() නියමයෙන් reference එක සමානද කියලා පරීක්ෂා කරන නිසා, අන්තර්ගතය එකම වුනත් නව object එකක් බවට පත් වෙලා effect එක නැවත ක්රියාත්මක වේ. එවිට state update වීමෙන් component එක නැවත render වෙයි, query නැවත නිර්මාණය වෙයි, effect නැවත fire වෙයි… මේ ආකාරයෙන් අසීමිත loop එකක් උදුනේය.
මෙම ගැටලුව වැළැක්වීමට සාමාන්යයෙන් developers useMemo හෝ primitives වෙන් වෙන් කර dependency array එකට දෙනවා, හෝ JSON.stringify කරලා compare කරනවා. නමුත් මේ පිළිවෙතවලටත් තමන්ගේම සීමා තියෙනවා – memoization එක object එක parent component එකෙන් එනවා නම් අසීරු, spread කරනවා නම් nested object වලට හෝ optional fields වලට ගැටලුවක්, stringify කිරීමෙන් order, undefined, functions, Dates වගේ data type ගත නොවනවා.
ඇත්තටම useDeepCompareEffect කියන hook එක @reactuses/core ප্যাকේජ් එකෙන් ලබා ගත හැකි අතර, එය useEffect එකේ signature එකට සම්පූර්ණයෙන්ම ගැලපෙනව. නමුත් dependency array එකේ values ගොඩක් deep compare කරයි, ඒ නිසා value එකේ වෙනසක් නැත්නම් effect එක නැවත fire නොවෙයි. මෙය performance එක රැකගන්නත්, stale closure bugs වලින් වැළැක්වන්නත් උදව් කරයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ React developers, startups, හා IT පාඨමාලා වලට මේ hook එක අත්යවශ්යයි. මූලිකවම:
- කේතයේ අසීමිත render loops නිසා server resources වියදම් වීම වැළැක්වීම.
- පෙර පසුපස bug හඳුනා ගැනීමේ කාලය අඩු කර, development speed වැඩි කිරීම.
- useMemo, spread, stringify වගේ workaround වලට වඩා පැහැදිලි API එකක් ලබා දීම නිසා junior developers ලා ඉගෙන ගැනීමට පහසුය.
- local startups වල API integration වල performance boost එකක් ලබා, පාරිභෝගික experience එක ඉහළ යාමට උපකාරී වේ.
ඒ නිසා, React ecosystem එකේ මෙම නව hook එක adopt කිරීම, ශ්රී ලංකාවේ තාක්ෂණික නිෂ්පාදන ගුණාත්මකත්වය ඉහළ නැංවීමට, හා දැනුම ප්රවර්ධනයට මඟ පෙන්වයි.
අවසානයේ, useDeepCompareEffect යනු useEffect හි limitation එකට සරල, කාර්යක්ෂම විසඳුමකි. ඔබේ React project එකේ performance bottleneck එකක් නම්, මේ hook එක අත්හදා බැලීම අනිවාර්යයි.
