React Native යෙදුම්වල ලැයිස්තු රූපකය අඩුම තත්ත්වයට පත් වූ විට, UI එක හුලං කරගැනීම, මතක පිරිවැය වැඩි වීම සහ අසීරු පණිවිඩ "ScrollView එකක් තබන්න" යන වාර්තා බොහොමයක් දකින්න ලැබේ. මේ ලිපියෙන් ඔබට ලැයිස්තු වර්ග 4ක් – ScrollView, FlatList, SectionList, FlashList – අතර කුමන තැනැත්තියක් ඔබේ යෙදුමට සුදුසුද කියා පැහැදිලි කරයි.
කොටස් 3ක් තුළ ලැයිස්තු වේගය අඩුවෙන්නේ කුමක් නිසාද?
- Mount cost – එකවර බොහෝ React ගස් සකස් වීම නිසා පළමු පින්තුරය අඩු වේ.
- Frame cost – සක්රියව පරීක්ෂා කරන ලද කාලය තුළ වැඩ බර වැඩි වීම නිසා frame drop වීම.
- Memory cost – අතිරේක native view සහ images මතකය අඩු කර, OOM හෝ iOS jetsam සිදු වීම.
මෙම ගැටළු වලට විසඳුම් වන්නේ virtualization (අවශ්ය දත්ත පමණක් රේන්ඩර් කිරීම) සහ recycling (දෘශ්ය කොටස් නැවත භාවිතා කිරීම) යන දෙකයි.
ScrollView – කවදාවත් භාවිතා නොකළ යුතු තැන
ScrollView සියලුම ළමයින් එකවර රේන්ඩර් කරයි. එය තෙරපිලි අඩු, තිරයේ දෙකක් පමණ දත්ත පමණක් ඇති Settings, Forms, Onboarding වැනි ස්ථාන සඳහා පමණක් සුදුසුය. 20–30 ක පමණ ලයින් වලට පමණක් පරිමාවක් තිබේ නම් එය ගැලපේ. නමුත් API එකෙන් ලබා ගන්නා ලැයිස්තුවක්, චැට් ඉතිහාසයක්, නිෂ්පාදන ග්රිඩ් එකක් වැනි විශාල දත්ත සමඟ එය භාවිතා කළහොත්, සියලු component එකම mount වීම, memory blow-up සහ UI hitching සිදු වේ.
ඊට අමතරව <ScrollView> <FlatList /> වැනි nested scroll structures වලට ඉඩ නොදෙන්න; ඒවා windowing බිඳ දමා frame jank එකට හේතුවෙයි.
FlatList සහ SectionList – සාමාන්ය virtualized ලැයිස්තු
FlatList යනු VirtualizedList එකේ සරල wrapper එකකි. එය viewport අසල items ටිකක් (overscan) පමණක් mount කරයි, සහ native cells නැවත භාවිතා කරයි. මෙය පහසු setup එකක්, අමතර dependencies නොමැතිව, sticky headers අවශ්ය නම් SectionList භාවිතා කළ හැක. නමුත් performance‑ය තවත් අධික දත්ත ගණන (ඉතා දහස් ගණන) සඳහා FlashList වඩා හොඳයි.
FlashList – Shopify විසින් නිර්මාණය කරන ලද අධික virtualized ලැයිස්තුව
FlashList, React Native community එකේ නවතම ප්රවණතාවයි. එය aggressive recycling හා optimized rendering engine එකක් සමඟ thousands+ items smooth ලෙස පෙන්වයි. Feed, catalog, chat, search results වැනි data‑heavy UI සඳහා FlashList ප්රථම තේරීම විය යුතුය. Dependency එකක් ( @shopify/flash-list ) එක්ක install කරගත හැක, එය performance gain එකක් ලබා දෙයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තරුණ developers, startup owners, හා IT ආයතන React Native භාවිතා කරමින් mobile apps නිර්මාණය කරයි. ලැයිස්තු කාර්ය සාධනය පිළිබඳ නිවැරදි තේරීම අයදුම්පත් වල අඩු memory usage, වේගවත් UI, සහ පරිශීලක තෘපතිය වැඩි කිරීමේදි වැදගත් වේ. FlashList හෝ FlatList භාවිතා කිරීමෙන් දේශීය startups වෙතින් නිෂ්පාදන ගුණාත්මකභාවය වැඩිවීම, app store rating ඉහළ යාම සහ අන්තර්ජාලයේ පරිශීලක base එකේ retention rate වැඩිවීමේ හැකියාව ලැබේ. එමෙන්ම, තාක්ෂණික පාඨමාලා හා coding bootcamps වල මේ concepts ඇතුළත් කිරීමෙන් නව පරපුරේ developers ලා React Native best practices ඉගෙන ගත හැක.
අවසානයේ, ඔබේ app එකේ data size අනුව ScrollView, FlatList, SectionList, FlashList අතර නිවැරදි තේරීම ඔබේ project එකේ performance එකේ මූලික රහසයි. නිවැරදි component එක තෝරා, virtualization හා recycling තාක්ෂණය ප්රයෝග කර, ඔබේ React Native යෙදුම native‑like smoothness එකක් ලබා ගත හැක.
