React යෙදුම් මන්දගාමීව පණගැන්වීම ගැන බොහෝ දෙනා අසභ්ය උපදෙස් අනුගමනය කරයි. ඒ අතර React.memo හෝ useCallback වැනි හැකියාවන් අතිශය භාවිතා කිරීම, කේතය පිරිසිදු නොවීමට හා කාර්ය සාධනයට නෙළුම් ගෙනෙනු ඇත.
මෙම ලිපිය තුල, නිෂ්පාදන වශයෙන් මැනවින් ප්රතිඵල ලබාදෙන තෙවැනි ප්රධාන උපදෙස් තුනක් හඳුන්වා දෙමු: රාජ්ය (state) නිවැරදි ස්ථානයට ගෙන යාම, කොම්පොනන්ට් සංග්රහය (component composition) භාවිතා කිරීම, සහ විශාල දත්ත කට්ටල සඳහා DOM වර්චුවල්රයිසෙෂන්.
1. රාජ්යය (State) පහළට ගෙන යාම – ප්රතිචාර කෑස්කේඩ් නවතා දැමීම
රාජ්යය උඩුගලයක තබා තිබේ නම්, ඒක වෙනස් වූ විට එම ගෙවතු සියල්ල නැවත රෙන්ඩර් වේ. උදාහරණයක් ලෙස, color රාජ්යය App කොම්පොනන්ට් එකේ තිබුනහොත්, HeavyChartComponent සහ ComplexTable වැනි බරපතළ කොම්පොනන්ට් ද අලුත් කරයි.
මෙය සරලව විසඳන්නේ, එම රාජ්යය සහ එහි පාලක UI එකක් වෙන් කොම්පොනන්ට් එකක් ලෙස ගොඩනැගීමයි. එවිට වෙනත් කොම්පොනන්ට් වලට කිසිඳු බලපෑමක් නොවේ.
2. කොම්පොනන්ට් සංග්රහය (Component Composition) – Children Props භාවිතා කිරීම
කලින් රාජ්යය පියාබැඳියාවට (parent) අයත් විය යුතු වුවත්, ඒක වෙනස් වූ විට දරුවන් (children) නැවත රෙන්ඩර් නොවිය යුතු නම්, children ප්රොප් එකෙන් UI එක ඉදිරිපත් කරන්න. මෙයින්, පියා කොම්පොනන්ට් එකේ රාජ්යය (උදා: scroll position) වෙනස් වුවත්, දරුවන් (HeavyContent) නැවත රෙන්ඩර් නොවෙයි.
3. DOM වර්චුවල්රයිසෙෂන් – විශාල ලැයිස්තු වල මතක හා CPU භාරය අඩු කිරීම
5,000+ අයිතම රෙන්ඩර් කිරීම මූලික ත්රෙඩ් එක බ්ලොක් කරයි. @tanstack/react-virtual වැනි ලයිබ්රරියක් භාවිතා කර, දර්ශනයේ පෙනෙන අයිතම පමණක් රෙන්ඩර් කිරීමෙන්, මතක භාවිතය හා ප්රතිචාර වේගය වැඩි වේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තාක්ෂණික පසුබැසීමේ දියුණුව සලස්වන්නේ, ඉගෙනුම් හා ව්යාපාරික ක්ෂේත්ර දෙකම වේගවත් යෙදුම් නිර්මාණය කිරීමයි. මෙම තත්ත්වයන් නිසා:
- සිසුන්ට React පාඨමාලා අතර තරඟකාරීත්වය වැඩිවීම.
- දේශීය සොෆ්ට්වේයාර් සමාගම්ට කාර්ය සාධනය වැඩි කර, සම්පත් ඉතිරි කිරීම.
- ආරම්භක ව්යාපාර (Startups) සඳහා මූලික පිරිවැය අඩු කර, වෙළඳපොළට වේගයෙන් පිවිසීමට හැකියාව.
ඉදිරියේදී, මෙම පදනම් තාක්ෂණික උපදෙස් අනුගමනය කර, ශ්රී ලංකාවේ React සංවර්ධනය නව මට්ටමකට ගෙන යා හැක.
අදම ඔබේ කේතය පරීක්ෂා කර, අඩු කාර්ය සාධනයේ ගැටළුව අහෝසි කර බලන්න. අලුත්ම ප්රතිචාරයක් ඔබේ අත්දැකීමේ කොටස වෙයි!
