React Performance Optimisation Checklist
Le applicazioni lente danneggiano i business.
Causano alti tassi di rimbalzo e frustrano gli utenti. Inoltre, aumentano i costi dell'infrastruttura.
Non servono trucchi complessi per risolvere il problema. La maggior parte dei problemi di velocità deriva da lavoro non necessario. Usa questa checklist per creare app React più veloci.
Ferma i re-render non necessari
React è veloce, ma renderizzare migliaia di componenti extra non lo è.
- Mantieni i componenti piccoli e dividi quelli grandi.
- Sposta lo stato più vicino al punto in cui lo utilizzi.
- Usa React.memo solo per i componenti che si renderizzano spesso o che eseguono operazioni pesanti.
- Non avvolgere ogni minuscolo componente in React.memo. Confrontare le props costa più che renderizzare.
Gestisci la logica pesante
- Usa useMemo per attività costose come l'ordinamento o il filtraggio dei dati.
- Usa useCallback quando passi funzioni a componenti figli memoizzati.
- Non usare useCallback per ogni singola funzione.
Correggi l'uso di useEffect
Il miglior useEffect è non usare useEffect.
- Non usare useEffect per impostare uno stato basandoti su un altro stato.
- Usa invece useMemo per i dati derivati.
- Questo porta a meno render e a un codice più pulito.
Carica in modo più intelligente
- Usa React.lazy per dividere il codice.
- Usa Suspense per caricare parti pesanti come grafici o mappe solo quando necessario.
- Questo migliora il tempo di caricamento iniziale.
Gestisci grandi quantità di dati
- Non renderizzare 20.000 elementi tutti in una volta.
- Usa librerie come react-window per virtualizzare le liste.
- Questo assicura che tu renderizzi solo ciò che l'utente vede sullo schermo.
Ottimizza asset e stato
- Usa WebP o AVIF per le immagini.
- Carica con il lazy loading le immagini che non sono ancora visibili sullo schermo.
- Usa useRef per i valori che non devono innescare un aggiornamento dell'interfaccia utente.
- Ridurre lo stato riduce i render.
Controlla il traffico di rete
- Usa il debouncing per le barre di ricerca per evitare chiamate API costanti.
- Usa librerie di caching per riutilizzare i dati e ridurre il carico del server.
La regola d'oro
Misura prima di ottimizzare.
- Usa React DevTools Profiler.
- Usa Lighthouse per trovare i veri colli di bottiglia.
- Non ottimizzare il codice che è già veloce.
L'ottimizzazione riguarda la semplicità. Scrivi prima codice prevedibile. Misura per secondo. Ottimizza per ultimo.