Kwa nini Programu yangu ya React ilianza kuwa nzito kwa rekodi 5,000

Nilijenga kipengele cha React chenye dropdown inayoweza kutafutwa na jedwali la data.

Kila kitu kilifanya kazi vizuri wakati wa uundaji. Kisha nilipakia data halisi za uzalishaji (production). Programu ilianza kuwa nzito.

Dropdown ilichukua sekunde kadhaa kufunguka. Kuandika kwenye kisanduku cha utafutaji kulihisi kama kuna ucheleweshaji (laggy). Programu ilitumia kumbukumbu (memory) nyingi sana.

Nililazimika kushughulikia rekodi 5,000 za watumiaji. Nilihitaji utafutaji wa papo hapo na kusogeza (scrolling) kwa ulaini.

Hivi ndivyo nilivyorekebisha.

  1. Tumia useMemo kwa mahesabu Niliacha kuchuja data kila wakati programu inapojirekebisha (render). Nilitumia useMemo kuhifadhi orodha iliyochujwa. Hii inazuia kazi zisizo za lazima kwa CPU.

  2. Ongeza Debouncing Kila herufi iliyobonyezwa ilikuwa inachochea utafutaji. Hii inagharimu nguvu nyingi kwa orodha kubwa. Niliongeza debounce ya ms 300. Sasa programu inatafuta tu baada ya mtumiaji kuacha kuandika.

  3. Tekeleza Virtualization Hili lilikuwa marekebisho makubwa zaidi. Badala ya ku-render elementi 5,000 za DOM, nilitumia react-window. Vivinjari (browser) sasa hu-render mistari 20 au 30 tu inayoonekana kwenye skrini. Hii inafanya scrolling kuwa na ulaini na kupunguza matumizi ya kumbukumbu.

  4. Zuia Re-renders Nilitumia React.memo kwenye vipengele vya mistari (row components). Pia nilitumia useCallback kwa vichocheo vya matukio (event handlers). Hii inazuia vipengele vya watoto (child components) visijirekebishe wakati data zao zinabaki vile vile.

  5. Tumia Server-side Pagination Niliacha kupata watumiaji wote kwa wakati mmoja. Nilibadilisha na kuanza kupata kurasa ndogo za rekodi 50. Hii inasababisha majibu ya API kuwa ya haraka na pakiti za data kuwa ndogo.

  6. Sanidi Material UI MUI Autocomplete ni nzuri, lakini inapata shida na orodha kubwa sana. Niliwekea kikomo chaguzi zinazoonyeshwa kwa matokeo 100 ya kwanza ili kuifanya iwe ya haraka.

Matokeo:

• Kasi ya dropdown: Kutoka sekunde 5 hadi chini ya ms 500. • Majibu ya utafutaji: Kutoka kuwa nzito hadi ya papo hapo. • Matumizi ya kumbukumbu: Kupungua kwa kiasi kikubwa.

Matatizo ya utendaji mara nyingi hujificha wakati wa uundaji. Huonekana wakati data halisi inapowafikia watumiaji wako.

Pima vikwazo (bottlenecks) vyako kwanza. Rekebisha vikubwa zaidi kwa kutumia memoization, virtualization, na debouncing.

Ni uboreshaji gani uliosaidia programu zako za React zaidi? Niambie kwenye maoni.

Chanzo: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9