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

Optimistic UI රේස් කොන්දিশන් පස්වෙනි ක්ලික් එකේ හෙළි වී, ඉදිරියට ආරක්ෂිත කරගැනීමේ ක්‍රමය

Optimistic UI රේස් කොන්දিশන් පස්වෙනි ක්ලික් එකේ හෙළි වී, ඉදිරියට ආරක්ෂිත කරගැනීමේ ක්‍රමය

React වල useOptimistic භාවිතා කරමින් ටාස්ක් ලයිස්ට් එකක් නිර්මාණය කළා. පළමු පරීක්ෂණයේ, චෙක්බොක්ස් එක ක්ලික් කළමත් තත්කාලිකව සලකුණු වෙනවා, ලෝඩ් ස්පින්නර් එකක් නොපෙනෙයි. ඒ නිසා UI එක ඉතාමත් සුවිශේෂී පෙනුමක් දක්වා තිබුණා.

කෙසේ වෙතත්, පරිශීලකයෙක් ඉක්මනින් පස් වරක් එකම චෙක්බොක්ස් එක ක්ලික් කළේය. UI එක තවමත් සලකුණු පෙනුම තබාගෙන තිබුණත්, පසුපස ඇති සර්වර් එකේ දත්ත වෙනස් නොවීය. ඒත් එක් එක් ක්ලික් එකකට අදාළව පණිවුඩ පහසුකමක් (request) පසුපසින් යවා ඇති අතර, ඒවා අස්ථානගතව එළඹීම නිසා බොහෝ විට පළමු තත්ත්වය පසුබැසී ගියේය.

මෙම ගැටළුවේ වැදගත්කම වන්නේ Optimistic UI එකේ “පෙනෙන” සහ “නිවැරදි” අතර වෙනස පෙන්වීමයි. UI එක තත්කාලිකව නිවැරදි පෙනුමක් ලබා දුන්නේත්, සර්වර් තත්ත්වය සමඟ සම්බන්ධතාවය අසමත් වීමෙන් පසු පරිශීලකයාට කිසිදු දෝෂයක් හෝ ලොග් එකක් නොපෙනේ. එබැවින්, ඉදිරියට යාමේදී එක් එක් අයිතමය සඳහා ඉල්ලීමක් සිදු වන තෙක් එම අයිතමය අක්‍රිය (disabled) කර තැබීම අත්‍යවශ්‍ය වේ.

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

ශ්‍රී ලංකාවේ සංවර්ධකයින්ට, මෙම අත්දැකීම පහත වාසි ලබා දේ:

  • ඉගෙනුම් වර්ධනය: Optimistic UI ගැටළුවලින් ඉගෙන ගනිමින්, async request පාලනය සහ state management කුසලතා වැඩිදියුණු කර ගත හැක.
  • ව්‍යාපාරික ආරක්ෂාව: පාරිභෝගික UI අසමත් වීමෙන් ව්‍යාපාරයට ඇති ආර්ථික හා ප්‍රතිචාර අලාභය අවම කරයි.
  • දේවල් වේගවත් කිරීම: අදාළ අයිතමය disabled කිරීමෙන්, අධික request ගණනක් පැන නැතිව, සර්වර් පීඩනය අඩු කරයි.

මෙම පදනම් මත, ශ්‍රී ලංකාවේ තාක්ෂණ සමාජය UI/UX ගුණාත්මකභාවය හා backend සමග සම්පූර්ණ සම්බන්ධතාවය තහවුරු කරගැනීමට නව පියවරක් ගත හැක.

අවසන් වශයෙන්, Optimistic UI භාවිතා කරන සියලු සංවර්ධකයින්ට, එක් එක් අයිතමයට request pending flag එකක් යොදා, disabled attribute එකක් එක් කිරීම මගින් මෙම රේස් කොන්දিশන් වලින් ආරක්ෂා විය හැකිය. එසේ නොකළහොත්, පරිශීලක අත්දැකීම විශ්වාසය අහිමි වන තත්ත්වයට පත් විය හැක.

💡 ඔබේ ව්‍යාපෘතියේ UI ස්ථායීතාව තහවුරු කරගන්න, දැන්ම පරීක්ෂා කරන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#OptimisticUI #React #BugFix #Frontend #SriLankaTech