ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-27, Monday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

useEffect අසීමිත ලූප් ගැටලුවට වගකීමක් නැති විසඳුම් – objects සහ arrays සමඟ

useEffect අසීමිත ලූප් ගැටලුවට වගකීමක් නැති විසඳුම් – objects සහ arrays සමඟ

React හි useEffect භාවිතා කරන විට, state එකට object හෝ array එකක් සපයන විට අසීමිත ලූප් එකක් ඇතිවීම අසාමාන්‍ය නොවේ. එය සිදුවන්නේ useEffect විසින් dependency list එකේ අයිතමයන්ගේ reference (===) පරීක්ෂා කරන බැවින්, අන්තර්ගතය සමාන වුවත් නව memory location එකක් නිර්මාණය වන විට පවා එය වෙනස් බවට සලකන නිසා.

උදාහරණයක් ලෙස const [ingredients, setIngredients] = useState({}); යන පරිදි state එක ආරම්භ කර, පසුව useEffect(() => { setIngredients({}); }, [ingredients]); ලෙස dependency list එකට ingredients එක දුන්නේ නම්, setIngredients({}) ක්‍රියාත්මක වන සෑම වාරයක්ම නව object එකක් නිර්මාණය කරයි. ඒ නිසා reference එක හැම විටම වෙනස් වීම නිසා useEffect නැවත නැවත ක්‍රියාත්මක වන අතර, ලූප් එක අසීමිතව දිගුවේ.

මෙම ගැටලුවට තිදෙනා විසඳුම් තිබේ. ප්‍රථමයෙන්, ඔබට state එක එකවර පමණක් ආරම්භ කරන්නේ නම්, dependency list එකේ හිස් array [] එකක් භාවිතා කරන්න. මෙය component එක mount වීමේදී පමණක් effect එක ක්‍රියාත්මක කරයි. දෙවැනිය, deep comparison කිරීම සඳහා custom hook එකක් (උදා. useDeepCompareEffect) නිර්මාණය කර, JSON.stringify හෝ lodash.isequal වැනි library භාවිතා කර content‑based comparison කරන්න. තෙවැනිය, setter function එකට යාවත්කාලීන අවශ්‍යතාව පරීක්ෂා කර, real change එකක් ඇත්නම් පමණක් state එක update කරන්න.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලාංකීය developers, startups සහ ඉගෙනුම් ආයතන සඳහා මෙම තේරුම ඉතා වැදගත්. React යෙදුම් නිර්මාණය කරන විට අසීමිත ලූප් එක නිසා performance bottleneck එකක් හෝ memory leak එකක් ඇති විය හැක. ඒ නිසා නිවැරදි dependency management සහ deep comparison පරික්ෂා කිරීම, ලොකු පරිමාණ web applications වල scalability සහ reliability වැඩි කරයි. තවද, local tech community එකේ knowledge sharing වැඩි කිරීමෙන් junior developers ලාට මෙවැනි pitfalls වලට ගොඩක් හෝ වැළැක්වීමට හැකි වේ. එසේම, Sri Lankan businesses සඳහා faster load times, lower server costs, හා පාරිභෝගික අත්දැකීමේ උසස්ම තත්ත්වය ලබා දීමට උපකාරී වේ.

අවසන් වශයෙන්, state reset කිරීමේ pattern එක production වල භාවිතා කිරීමේදී වැළැක්විය යුතුයි. එය වෙනුවට state එක ආරම්භක value එකෙන් initialize කර, reset අවශ්‍ය නම් explicit function එකක් (උදා. resetIngredients) නිර්මාණය කර event handlers හරහා invoke කිරීම හොඳ ක්‍රමවේදයකි. මෙයින් code readability, maintainability, හා debugging පහසු වේ.

💡 useEffect ලූප් ගැටලුවට දැන්ම විසඳුම ගන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#React #useEffect #JavaScript #Frontend #Tutorial