5,000 రికార్డుల వద్ద నా React App ఎందుకు నెమ్మదించింది?
నేను సెర్చబుల్ డ్రాప్డౌన్ మరియు డేటా టేబుల్తో ఒక React ఫీచర్ను రూపొందించాను.
డెవలప్మెంట్ సమయంలో అంతా బాగానే పనిచేసింది. కానీ, నేను రియల్ ప్రొడక్షన్ డేటాను లోడ్ చేసినప్పుడు, యాప్ నెమ్మదించింది.
డ్రాప్డౌన్ ఓపెన్ కావడానికి సెకన్ల సమయం పడుతోంది. సెర్చ్ బాక్స్లో టైప్ చేయడం లాగీగా (laggy) అనిపించింది. యాప్ చాలా మెమరీని ఉపయోగించింది.
నేను 5,000 యూజర్ రికార్డులను హ్యాండిల్ చేయాల్సి ఉంది. నాకు ఇన్స్టంట్ సెర్చ్ మరియు స్మూత్ స్క్రోలింగ్ అవసరం.
నేను దీన్ని ఎలా పరిష్కరించానో ఇక్కడ ఉంది.
1. కాలిక్యులేషన్స్ కోసం useMemo ఉపయోగించండి
ప్రతి రెండర్ (render) సమయంలో డేటాను ఫిల్టర్ చేయడం నేను ఆపివేశాను. ఫిల్టర్ చేసిన లిస్ట్ను స్టోర్ చేయడానికి నేను useMemo ఉపయోగించాను. ఇది CPU పై అనవసరమైన పని భారాన్ని తగ్గిస్తుంది.
2. Debouncing జోడించండి
ప్రతి కీస్ట్రోక్ (keystroke) సెర్చ్ను ట్రిగ్గర్ చేసేది. పెద్ద లిస్ట్ల విషయంలో ఇది రిసోర్స్లను ఎక్కువగా వినియోగిస్తుంది. నేను 300ms డీబౌన్స్ (debounce) జోడించాను. ఇప్పుడు యూజర్ టైపింగ్ ఆపిన తర్వాత మాత్రమే యాప్ సెర్చ్ చేస్తుంది.
3. Virtualization అమలు చేయండి
ఇదే అతిపెద్ద పరిష్కారం. 5,000 DOM ఎలిమెంట్లను రెండర్ చేసే బదులు, నేను react-window ఉపయోగించాను. ఇప్పుడు బ్రౌజర్ స్క్రీన్పై కనిపిస్తున్న 20 లేదా 30 రోస్ను మాత్రమే రెండర్ చేస్తుంది. ఇది స్క్రోలింగ్ను స్మూత్గా చేస్తుంది మరియు మెమరీ వినియోగాన్ని తగ్గిస్తుంది.
4. Re-renders ని నివారించండి
రో (row) కాంపోనెంట్స్పై నేను React.memo ఉపయోగించాను. ఈవెంట్ హ్యాండ్లర్ల కోసం useCallback కూడా ఉపయోగించాను. దీనివల్ల డేటా మారనప్పుడు చైల్డ్ కాంపోనెంట్స్ అప్డేట్ అవ్వకుండా ఉంటాయి.
5. Server-side Pagination ఉపయోగించండి
యూజర్లందరినీ ఒకేసారి ఫెచ్ (fetch) చేయడం నేను ఆపివేశాను. 50 రికార్డుల చిన్న పేజీలను ఫెచ్ చేసే పద్ధతికి మారాను. దీనివల్ల API రెస్పాన్స్లు వేగంగా వస్తాయి మరియు డేటా పేలోడ్ (payload) పరిమాణం తగ్గుతుంది.
6. Material UI ని ఆప్టిమైజ్ చేయండి
MUI Autocomplete చాలా బాగుంటుంది, కానీ భారీ లిస్ట్లతో ఇది ఇబ్బంది పడుతుంది. వేగంగా ఉండటం కోసం, నేను ప్రదర్శించే ఆప్షన్లను మొదటి 100 ఫలితాలకు పరిమితం చేశాను.
ఫలితాలు:
• డ్రాప్డౌన్ వేగం: 5 సెకన్ల నుండి 500ms కంటే తక్కువకు తగ్గింది. • సెర్చ్ రెస్పాన్స్: లాగీగా ఉండటం నుండి ఇన్స్టంట్గా మారింది. • మెమరీ వినియోగం: గణనీయంగా తగ్గింది.
పెర్ఫార్మెన్స్ సమస్యలు తరచుగా డెవలప్మెంట్ సమయంలో కనిపించవు. రియల్ డేటా యూజర్లకు చేరుకున్నప్పుడు అవి బయటపడతాయి.
ముందుగా మీ బాటిల్నెక్స్ (bottlenecks) ను గుర్తించండి. మెమోయిజేషన్ (memoization), వర్చువలైజేషన్ (virtualization) మరియు డీబౌసింగ్ (debouncing) ద్వారా అతిపెద్ద సమస్యలను పరిష్కరించండి.
ఏ ఆప్టిమైజేషన్ మీ React యాప్లకు బాగా సహాయపడింది? కామెంట్లలో నాకు చెప్పండి.
Source: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9