5,000 રેકોર્ડ્સ પર મારી React એપ શા માટે ધીમી પડી ગઈ

મેં એક સર્ચેબલ ડ્રોપડાઉન અને ડેટા ટેબલ સાથેનું React ફીચર બનાવ્યું હતું.

ડેવલપમેન્ટ દરમિયાન બધું બરાબર કામ કરતું હતું. પછી મેં રિયલ પ્રોડક્શન ડેટા લોડ કર્યો. એપ ધીમી પડી ગઈ.

ડ્રોપડાઉન ખુલવામાં સેકન્ડો લાગતી હતી. સર્ચ બોક્સમાં ટાઈપ કરવું લેગી (laggy) લાગતું હતું. એપ ખૂબ વધારે મેમરી વાપરતી હતી.

મારે 5,000 યુઝર રેકોર્ડ્સ હેન્ડલ કરવાના હતા. મને ઇન્સ્ટન્ટ સર્ચ અને સ્મૂધ સ્ક્રોલિંગની જરૂર હતી.

મેં તેને કેવી રીતે ઠીક કર્યું તે અહીં છે.

  1. ગણતરીઓ માટે useMemo નો ઉપયોગ કરો મેં દરેક રેન્ડર પર ડેટા ફિલ્ટર કરવાનું બંધ કર્યું. મેં ફિલ્ટર કરેલી યાદી સ્ટોર કરવા માટે useMemo નો ઉપયોગ કર્યો. આ CPU માટે બિનજરૂરી કામ અટકાવે છે.

  2. Debouncing ઉમેરો દરેક કીસ્ટ્રોક (keystroke) સર્ચ ટ્રિગર કરતું હતું. મોટી યાદીઓ માટે આ ખર્ચાળ (expensive) છે. મેં 300ms નો debounce ઉમેર્યો. હવે યુઝર ટાઈપ કરવાનું બંધ કરે ત્યારે જ એપ સર્ચ કરે છે.

  3. Virtualization લાગુ કરો આ સૌથી મોટો સુધારો હતો. 5,000 DOM એલિમેન્ટ્સ રેન્ડર કરવાને બદલે, મેં react-window નો ઉપયોગ કર્યો. બ્રાઉઝર હવે સ્ક્રીન પર દેખાતી માત્ર 20 કે 30 રો (rows) જ રેન્ડર કરે છે. આનાથી સ્ક્રોલિંગ સ્મૂધ બને છે અને મેમરીનો વપરાશ ઘટે છે.

  4. Re-renders અટકાવો મેં રો (row) કમ્પોનન્ટ્સ પર React.memo નો ઉપયોગ કર્યો. મેં ઇવેન્ટ હેન્ડલર્સ માટે useCallback નો પણ ઉપયોગ કર્યો. આનાથી ચાઇલ્ડ કમ્પોનન્ટ્સનો ડેટા સમાન હોય ત્યારે તેઓ અપડેટ થતા અટકે છે.

  5. Server-side Pagination નો ઉપયોગ કરો મેં એકસાથે બધા યુઝર્સ ફેચ (fetch) કરવાનું બંધ કર્યું. હું 50 રેકોર્ડ્સના નાના પેજ ફેચ કરવા પર સ્વિચ થયો. આનાથી API રિસ્પોન્સ ઝડપી મળે છે અને ડેટા પેલોડ (payload) નાનો રહે છે.

  6. Material UI ને ઓપ્ટિમાઇઝ કરો MUI Autocomplete ઉત્તમ છે, પરંતુ તે મોટી યાદીઓ સાથે સંઘર્ષ કરે છે. તેને ઝડપી રાખવા માટે મેં ડિસ્પ્લે થતા વિકલ્પોને પ્રથમ 100 પરિણામો સુધી મર્યાદિત રાખ્યા.

પરિણામો:

• ડ્રોપડાઉન સ્પીડ: 5 સેકન્ડથી ઘટીને 500ms થી ઓછી થઈ ગઈ. • સર્ચ રિસ્પોન્સ: લેગી (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