५,००० रेकॉर्ड्समुळे माझे React App का स्लो झाले

मी एक searchable dropdown आणि data table असलेले React feature तयार केले.

डेव्हलपमेंट दरम्यान सर्व काही व्यवस्थित चालले होते. त्यानंतर मी रिअल प्रोडक्शन डेटा लोड केला आणि ॲप स्लो झाले.

ड्रॉपडाउन उघडायला काही सेकंद लागायचे. सर्च बॉक्समध्ये टाईप करताना लॅग (laggy) जाणवत असे. ॲप खूप जास्त मेमरी वापरत होते.

मला ५,००० युजर रेकॉर्ड्स हाताळायचे होते. मला इन्स्टंट सर्च आणि स्मूथ स्क्रोलिंग हवे होते.

मी ते कसे ठीक केले ते खाली दिले आहे.

१. कॅल्क्युलेशनसाठी useMemo वापरा

मी प्रत्येक render वेळी डेटा फिल्टर करणे थांबवले. फिल्टर केलेली लिस्ट स्टोअर करण्यासाठी मी useMemo वापरले. यामुळे CPU वरचा अनावश्यक ताण कमी होतो.

२. Debouncing वापरा

प्रत्येक कीस्ट्रोकवर (keystroke) सर्च ट्रिगर होत असे. मोठ्या लिस्टसाठी हे खूप खर्चिक (expensive) असते. मी ३००ms चा debounce जोडला. आता युजरने टाईप करणे थांबवल्यानंतरच ॲप सर्च करते.

३. Virtualization लागू करा

हा सर्वात मोठा उपाय होता. ५,००० DOM elements रेंडर करण्याऐवजी, मी react-window वापरले. आता ब्राउझर फक्त स्क्रीनवर दिसणाऱ्या २० किंवा ३० रो (rows) रेंडर करतो. यामुळे स्क्रोलिंग स्मूथ होते आणि मेमरीचा वापर कमी होतो.

४. Re-renders टाळा

मी row components वर React.memo वापरले. तसेच event handlers साठी useCallback वापरले. यामुळे डेटा बदलला नसला तरी child components अपडेट होणे थांबते.

५. Server-side Pagination वापरा

मी सर्व युजर्सना एकाच वेळी फेच (fetch) करणे थांबवले. मी ५० रेकॉर्ड्सच्या लहान पेजेस फेच करण्याकडे वळलो. यामुळे API रिस्पॉन्स वेगाने मिळतात आणि डेटा पेलोड (payload) लहान होतो.

६. Material UI ऑप्टिमाइझ करा

MUI Autocomplete उत्तम आहे, पण मोठ्या लिस्टसोबत ते संघर्ष करते. वेगवान ठेवण्यासाठी मी डिस्प्ले होणारे ऑप्शन्स पहिल्या १०० रिझल्ट्सपुरते मर्यादित केले.

परिणाम:

• ड्रॉपडाउन स्पीड: ५ सेकंदांवरून ५००ms पेक्षा कमी. • सर्च रिस्पॉन्स: लॅगी (laggy) वरून इन्स्टंट. • मेमरी वापर: लक्षणीय घट.

परफॉर्मन्सच्या समस्या अनेकदा डेव्हलपमेंट दरम्यान लपलेल्या असतात. जेव्हा रिअल डेटा युजर्सपर्यंत पोहोचतो, तेव्हा त्या समोर येतात.

प्रथम तुमचे बॉटलनेक्स (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