ఫీడ్లో ఇరవై ఐటమ్స్ ఉంటే పర్ఫెక్ట్గా అనిపిస్తుంది. స్క్రోలింగ్ చాలా స్మూత్గా ఉంటుంది. మీ క్లయింట్ సంతోషంగా ఉంటారు. కానీ మీరు ప్రొడక్షన్కు పంపినప్పుడు, డేటా వచ్చినప్పుడు, అకస్మాత్తుగా రెండు వేల రోస్ (rows) కనిపిస్తాయి. UI నెమ్మదించడం మొదలవుతుంది. మెమరీ పెరిగిపోతూ చివరకు OS యాప్ను ఆపేస్తుంది. నిరాశలో, కొందరు డెవలపర్లు అన్నింటినీ ఒక ScrollViewలో చుట్టి పని ముగించేస్తారు. ఆ నిర్ణయం ఒక సమస్యను పరిష్కరించడానికి బదులుగా మూడు కొత్త బగ్లను సృష్టిస్తుంది.
లిస్ట్లు (Lists) మీ React Native యాప్ను వినియోగదారులు ఎలా చూస్తారో నిర్ణయించే పెర్ఫార్మెన్స్ బాటిల్నెక్ (performance bottleneck). వాటిని సరిగ్గా ఉపయోగిస్తే యాప్ నేటివ్ (native) అనుభూతిని ఇస్తుంది. తప్పుగా ఉపయోగిస్తే ఎంత అందమైన స్క్రీన్ అయినా భారంగా మారుతుంది. దీనికి ప్రధాన కారణం మీరు ఎంచుకున్న కాంపోనెంట్ మరియు JavaScript మరియు UI థ్రెడ్లకు మీరు అప్పగించే పని మధ్య ఉన్న అసమతుల్యత. React Native రెండు ట్రాక్లపై నడుస్తుంది. మీ లాజిక్ JS థ్రెడ్లో ఉంటుంది, పెయింటింగ్ (painting) నేటివ్ UI థ్రెడ్లో జరుగుతుంది. మీరు ఒక భారీ లిస్ట్ను తప్పుగా రెండర్ చేసినప్పుడు, రెండు థ్రెడ్లు లేఅవుట్ కాలిక్యులేషన్లు, రీ-రెండర్లు మరియు మెమరీ అలోకేషన్లలో మునిగిపోతాయి. దీని ఫలితంగా డ్రాప్డ్ ఫ్రేమ్లు (dropped frames), ఖాళీ స్క్రీన్లు మరియు చివరకు యాప్ క్రాష్ అవ్వడం జరుగుతుంది.
సరైన సాధనాన్ని ఎంచుకోండి
లిస్ట్ కాంపోనెంట్ను ఎంచుకోవడం అనేది ఒక ఆలోచనాత్మకమైన ఆర్కిటెక్చరల్ నిర్ణయం కావాలి, కేవలం అలవాటుగా చేసేది కాకూడదు.
ScrollView అనేది అత్యంత సరళమైన ఎంపిక. ఇది మీరు ఇచ్చే ప్రతి చైల్డ్ను తీసుకుని, వెంటనే మెమరీలోకి మౌంట్ చేస్తుంది మరియు మొత్తం సమూహాన్ని నేటివ్ స్క్రోల్ ఇంజిన్కు అందిస్తుంది. సెట్టింగ్స్ స్క్రీన్, లాగిన్ ఫారమ్ లేదా పది సెక్షన్లు ఉన్న స్టాటిక్ ప్రొడక్ట్ డీటెయిల్ పేజీ వంటి చిన్న, స్థిరమైన కంటెంట్ కోసం ఇది సరిగ్గా సరిపోతుంది. ఇది ఊహించదగినది మరియు స్టైల్ చేయడం సులభం. అయితే ఇందులో వర్చువలైజేషన్ (virtualization) ఉండదు. మీరు దీనికి రెండు వేల ఐటమ్స్ ఇస్తే, అది విధేయతతో రెండు వేల నేటివ్ వ్యూస్ను సృష్టిస్తుంది. పెద్ద లేదా డైనమిక్ డేటా సెట్ల కోసం ScrollViewను ఉపయోగించవద్దు. దీనిని ఒక లైబ్రరీ షెల్ఫ్లా కాకుండా, ఒక ఫ్రేమ్ చేసిన పోస్టర్లా భావించండి.
FlatList అనేది పొడవైన, ఒకే రకమైన ఫీడ్ల కోసం ఉపయోగించే ప్రధాన సాధనం. ఇది కంటెంట్ను వర్చువలైజ్ చేస్తుంది, అంటే ప్రస్తుతం కనిపిస్తున్న లేదా వ్యూపోర్ట్ (viewport) దగ్గర ఉన్న రోస్ను మాత్రమే ఇది మౌంట్ చేస్తుంది. వినియోగదారు స్క్రోల్ చేస్తున్నప్పుడు, FlatList స్క్రీన్ నుండి వెళ్ళిపోయే సెల్స్ను అన్మౌంట్ చేసి
చిన్న వ్యూహాత్మక అలవాట్లు, కేవలం పనిచేసే లిస్ట్కు మరియు అద్భుతంగా పనిచేసే లిస్ట్కు మధ్య తేడాను చూపుతాయి.
స్టేబుల్ కీలను (stable keys) ఉపయోగించండి. మీ డేటా సెట్ నుండి ఒక నిజమైన ఐడెంటిఫైయర్ను ఎల్లప్పుడూ key ప్రాప్కు పంపండి. ఎప్పుడూ అర్రే ఇండెక్స్ను (array index) ఉపయోగించకండి. మీ లిస్ట్ రీఆర్డర్ అయినప్పుడు, ఫిల్టర్ అయినప్పుడు లేదా కొత్త ఐటమ్స్ యాడ్ అయినప్పుడు, ఇండెక్స్ ఆధారిత కీ వల్ల React తప్పు డేటాను తప్పు రీసైకిల్డ్ కాంపోనెంట్తో జత చేసేలా మోసపోతుంది. ఆ తప్పు వల్ల అనవసరమైన unmounts, స్టేట్ మిస్మ్యాచ్లు మరియు వరుసగా re-renders జరుగుతాయి. సరైన ID ద్వారా ఏ రో (row) ఎక్కడికి మారిందో React ఖచ్చితంగా తెలుసుకోగలదు.
రోలను మెమోయిజ్ (Memoize) చేయండి. మీ రో కాంపోనెంట్ను React.memoతో చుట్టండి (wrap), తద్వారా దాని props నిజంగా మారినప్పుడు మాత్రమే అది re-render అవుతుంది. ఈ రక్షణ లేకపోతే, డేటా ఒకేలా ఉన్నప్పటికీ, పేరెంట్ స్టేట్ అప్డేట్ అయిన ప్రతిసారీ కనిపించే ప్రతి రో కూడా re-render అవుతుంది. నిరంతరం మారుతూ ఉండే పెద్ద లిస్ట్లలో, ఈ వృథా సైకిల్స్ వేగంగా పెరిగిపోతాయి.
renderItemను స్టేబుల్గా ఉంచండి. ప్రతి పేరెంట్ రెండర్ సమయంలో renderItem ప్రాప్లో నేరుగా కొత్త ఫంక్షన్ను నిర్వచించవద్దు. renderItem={({ item }) => <Row data={item} />} వంటి ఇన్లైన్ యారో ఫంక్షన్, పేరెంట్ అప్డేట్ అయిన ప్రతిసారీ కొత్త రిఫరెన్స్ను సృష్టిస్తుంది. దీనివల్ల FlatList ప్రాప్ మారినట్లు భావించి, అనవసరంగా రోను రీసైకిల్ చేస్తుంది. రెండర్ ఫంక్షన్ను కాంపోనెంట్ వెలుపల నిర్వచించండి లేదా useCallbackతో మెమోయిజ్ చేయండి, తద్వారా రిఫరెన్స్ స్టేబుల్గా ఉంటుంది.
వీలైనప్పుడల్లా getItemLayout ఉపయోగించండి. మీ రోలకు ఫిక్స్డ్ లేదా ఊహించదగిన ఎత్తు (height) ఉన్నట్లయితే, అది ఎంత అనేది FlatListకి ఖచ్చితంగా చెప్పండి. ఈ ప్రాప్ వల్ల లిస్ట్ ఖరీదైన నేటివ్ మెజర్మెంట్ కాల్స్ను దాటవేయగలదు. మౌంట్ అయిన తర్వాత ప్రతి సెల్ను కొలవడానికి బదులుగా, లిస్ట్ గణిత పద్ధతిలో పొజిషన్ను లెక్కిస్తుంది. వందల లేదా వేల ఐటమ్స్ ఉన్న లిస్ట్లలో ఈ తేడా స్పష్టంగా కనిపిస్తుంది, ఎందుకంటే అక్కడ onLayout వల్ల కలిగే రద్దీ JS థ్రెడ్ను నెమ్మదింపజేయగలదు.
ఇమేజ్లను వేగంగా ఆప్టిమైజ్ చేయండి. పరిమితి లేని ఇమేజ్లు లిస్ట్కు విషంతో సమానం. ఇమేజ్ డీకోడ్ కావడానికి ముందే నేటివ్ లేయర్ స్థలాన్ని రిజర్వ్ చేసుకునేలా ఎల్లప్పుడూ స్పష్టమైన width మరియు height సెట్ చేయండి. రిమోట్ ఇమేజ్ల కోసం, మెమరీ క్యాషింగ్, డిస్క్ పర్సిస్టెన్స్ మరియు ఫార్మాట్ ఆప్టిమైజేషన్ను నిర్వహించే Expo Image లేదా దానికి సమానమైన క్యాషింగ్ లైబ్రరీని ఉపయోగించండి. డిఫాల్ట్ React Native Image కాంపోనెంట్ ప్రోటోటైప్లకు సరిపోతుంది, కానీ ప్రొడక్షన్ ఫీడ్లకు మెమరీ మరియు లోడింగ్ స్టేట్లపై మరింత నియంత్రణ అవసరం.
స్క్రోల్ కంటైనర్లను నెస్టెడ్ (nesting) చేయవద్దు. వర్టికల్ FlatListని ఎప్పుడూ వర్టికల్ ScrollView లోపల ఉంచకండి. పేరెంట్ ScrollView అన్ని స్క్రోల్ ఈవెంట్లను క్యాప్చర్ చేస్తుంది మరియు చైల్డ్ FlatList తన వ్యూపోర్ట్ను కొలిచే సామర్థ్యాన్ని దెబ్బతీస్తుంది. దీనివల్ల FlatList ఏ రోలు కనిపించాలో తెలియక వర్చువలైజేషన్ (virtualization) విఫలమవుతుంది. ఫలితంగా, ప్రతి రో మౌంట్ అవుతుంది, దీనివల్ల వర్చువలైజేషన్ యొక్క అసలు ఉద్దేశ్యం దెబ్బతింటుంది. మీకు లిస్ట్ పైన హెడర్ కావాలంటే, FlatList యొక్క ListHeaderComponent ప్రాప్ను ఉపయోగించండి. మీకు సంక్లిష్టమైన స్టిక్కీ (sticky) బిహేవియర్ కావాలంటే, తగిన హెడర్ కాన్ఫిగరేషన్తో SectionList లేదా FlashListని ఉపయోగించండి.
ది గోల్డెన్ రూల్ (The Golden Rule)
కంటెంట్ తక్కువగా మరియు పరిమితంగా ఉంటే, ScrollViewని ఉపయోగించండి. కంటెంట్ యూజర్-జనరేటెడ్ డేటా లేదా రిమోట్ పేజినేషన్తో పెరుగుతుంటే, వర్చువలైజ్డ్ లిస్ట్ను ఉపయోగించండి. లిస్ట్ అనేది యాప్లో ప్రధాన అంశం మరియు వినియోగదారులు నిమిషాల తరబడి స్క్రోల్ చేసే అవకాశం ఉన్నప్పుడు, FlashListని ఎంచుకోండి.
మర్చిపోవడానికి సులభమైన చివరి సత్యం ఇది. సాధారణ (boring) రోలు వేగంగా స్క్రోల్ అవుతాయి. మీ రో కాంపోనెంట్ ఎంత తేలికగా ఉంటే, మీ లిస్ట్ అంత స్మూత్గా ఉంటుంది. ప్రతి రో నుండి నెస్టెడ్ నావిగేషన్లు, భారీ కంప్యూటేషన్లు మరియు అనవసరమైన యానిమేషన్లను తొలగించండి. మార్కప్ (markup) ఫ్లాట్గా, లాజిక్ తక్కువగా మరియు ఇమేజ్లు సరైన సైజులో ఉండేలా చూసుకోండి. లిస్ట్ ఎంత వేగంగా పనిచేస్తుంది అనేది అది రెండర్ చేసే అంశాల మొత్తం బరువుపై ఆధారపడి ఉంటుంది. ప్రతి రోను తేలికగా (cheap) ఉంచండి, అప్పుడు లిస్ట్ అత్యుత్తమమైన అనుభూతిని ఇస్తుంది.