Why My React App Became Slow at 5,000 Records
मैंने एक सर्च करने योग्य (searchable) ड्रॉपडाउन और एक डेटा टेबल के साथ एक React फीचर बनाया।
डेवलपमेंट के दौरान सब कुछ ठीक चल रहा था। फिर मैंने असली प्रोडक्शन डेटा लोड किया। ऐप धीमा हो गया।
ड्रॉपडाउन खुलने में सेकंड्स लग रहे थे। सर्च बॉक्स में टाइप करना लैगी (laggy) महसूस हो रहा था। ऐप बहुत अधिक मेमोरी का उपयोग कर रहा था।
मुझे 5,000 यूजर रिकॉर्ड्स को हैंडल करना था। मुझे इंस्टेंट सर्च और स्मूथ स्क्रॉलिंग की जरूरत थी।
यहाँ बताया गया है कि मैंने इसे कैसे ठीक किया।
कैलकुलेशन के लिए useMemo का उपयोग करें मैंने हर रेंडर पर डेटा फ़िल्टर करना बंद कर दिया। मैंने फ़िल्टर की गई लिस्ट को स्टोर करने के लिए useMemo का उपयोग किया। यह CPU के लिए अनावश्यक काम को रोकता है।
Debouncing जोड़ें हर कीस्ट्रोक (keystroke) से सर्च ट्रिगर हो जाता था। बड़ी लिस्ट के लिए यह काफी भारी पड़ता है। मैंने 300ms का debounce जोड़ा। अब ऐप केवल तभी सर्च करता है जब यूजर टाइप करना बंद कर देता है।
Virtualization लागू करें यह सबसे बड़ा सुधार था। 5,000 DOM एलिमेंट्स को रेंडर करने के बजाय, मैंने react-window का उपयोग किया। अब ब्राउज़र केवल स्क्रीन पर दिखने वाली 20 या 30 पंक्तियों (rows) को ही रेंडर करता है। इससे स्क्रॉलिंग स्मूथ हो जाती है और मेमोरी का उपयोग कम हो जाता है।
Re-renders को रोकें मैंने रो (row) कंपोनेंट्स पर React.memo का उपयोग किया। मैंने इवेंट हैंडलर्स के लिए useCallback का भी उपयोग किया। यह चाइल्ड कंपोनेंट्स को तब अपडेट होने से रोकता है जब उनका डेटा समान रहता है।
Server-side Pagination का उपयोग करें मैंने एक साथ सभी यूजर्स को फेच (fetch) करना बंद कर दिया। मैं 50 रिकॉर्ड्स के छोटे पेजों को फेच करने पर स्विच हो गया। इसके परिणामस्वरूप API रिस्पॉन्स तेज़ हो जाते हैं और डेटा पेलोड छोटा हो जाता है।
Material UI को ऑप्टिमाइज़ करें MUI Autocomplete बेहतरीन है, लेकिन यह बहुत बड़ी लिस्ट के साथ संघर्ष करता है। इसे तेज़ रखने के लिए मैंने प्रदर्शित विकल्पों को पहले 100 परिणामों तक सीमित कर दिया।
परिणाम:
• ड्रॉपडाउन स्पीड: 5 सेकंड से घटकर 500ms से कम। • सर्च रिस्पॉन्स: लैगी से इंस्टेंट। • मेमोरी उपयोग: महत्वपूर्ण कमी।
परफॉरमेंस की समस्याएं अक्सर डेवलपमेंट के दौरान छिपी रहती हैं। वे तब सामने आती हैं जब असली डेटा आपके यूजर्स तक पहुँचता है।
सबसे पहले अपनी बाधाओं (bottlenecks) को मापें। memoization, virtualization और debouncing के साथ सबसे बड़ी समस्याओं को ठीक करें।
किस ऑप्टिमाइज़ेशन ने आपके React ऐप्स की सबसे अधिक मदद की? मुझे कमेंट्स में बताएं।
स्रोत: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9