Orodha ya Ukaguzi ya Kuboresha Utendaji wa React
Programu zinazofanya kazi polepole huua biashara.
Husababisha viwango vya juu vya watu kuondoka (bounce rates) na kuwakera watumiaji. Pia huongeza gharama zako za miundombinu.
Huhitaji mbinu tata ili kurekebisha hili. Matatizo mengi ya kasi yanatokana na kazi zisizo za lazima. Tumia orodha hii ya ukaguzi ili kutengeneza programu za React zenye kasi zaidi.
Acha Re-renders zisizo za lazima
React ni ya haraka, lakini kufanya rendering ya maelfu ya vipengee (components) vya ziada siyo.
- Weka vipengee vidogo na vigawe vile vikubwa.
- Hamisha state karibu na pale unapotumia.
- Tumia React.memo kwa vipengee tu vinavyofanya rendering mara kwa mara au vinavyofanya kazi nzito.
- Usifunike kila kipengee kidogo kwa React.memo. Inagharimu zaidi kulinganisha props kuliko kufanya rendering.
Shughulikia Mantiki Nzito
- Tumia useMemo kwa kazi zenye gharama kubwa kama kupanga (sorting) au kuchuja (filtering) data.
- Tumia useCallback unapopitisha kazi (functions) kwa watoto waliowekwa kwenye memo.
- Usitumie useCallback kwa kila kazi moja kwa moja.
Rekebisha Matumizi yako ya useEffect
useEffect bora zaidi ni kutokuwa na useEffect.
- Usitumie useEffect kuweka state kulingana na state nyingine.
- Badala yake, tumia useMemo kwa data zinazotokana na nyingine (derived data).
- Hii husababisha rendering chache na kodi safi zaidi.
Pakia kwa Akili Zaidi
- Tumia React.lazy kugawa kodi yako.
- Tumia Suspense kupakia sehemu nzito kama chati au ramani pale tu zinapohitajika.
- Hii huboresha muda wako wa upakiaji wa awali.
Dhibiti Data Kubwa
- Usifanye rendering ya vipengele 20,000 kwa wakati mmoja.
- Tumia maktaba kama react-window ili kufanya orodha kuwa za kidijitali (virtualize lists).
- Hii inahakikisha unachora tu kile ambacho mtumiaji anakiona kwenye skrini.
Boresha Mali (Assets) na State
- Tumia WebP au AVIF kwa picha.
- Pakia kwa ucheleweshaji (lazy load) picha ambazo bado hazionekani kwenye skrini.
- Tumia useRef kwa thamani ambazo hazihitaji kusababisha mabadiliko ya UI.
- Kupunguza state hupunguza rendering.
Dhibiti Trafiki ya Mtandao
- Tumia debouncing kwa sehemu za kutafutia (search bars) ili kuzuia maombi ya API (API calls) yasiyo ya mwisho.
- Tumia maktaba za caching ili kutumia tena data na kupunguza mzigo wa seva.
Kanuni ya Dhahabu
Pima kabla ya kuboresha.
- Tumia React DevTools Profiler.
- Tumia Lighthouse kupata vikwazo halisi (bottlenecks).
- Usiboreshe kodi ambayo tayari ina kasi.
Uboreshaji unahusu urahisi. Andika kodi inayotabirika kwanza. Pima pili. Boresha mwisho.