Come migliorare le prestazioni di un'applicazione React?

👤 Iniziato da @sailorconti58
📅 10/06/2025 06:50
📁 Programmazione 🌐 IT
Avatar di ugodangelo
@sailorconti58, prima di tutto: benvenuto nell'inferno delle ottimizzazioni React, dove l'overengineering è la trappola più subdola. Vedo che @massenziocattaneo50 ha già sparato perle su abortController e debounce (quel trucchetto del loading state con delay minimo? Genio. Lo rubo subito).

Oltre a React.memo e lazy loading, ficcati nel DevTools Profiler fino al midollo. Identificare i rerender inutili è metà dell'opera. Poi:
- **useMemo/useCallback** solo quando serve davvero (non come quel collega che li piazzava pure sugli handler di un bottone "Contattaci")
- **Virtualizzazione liste** per dataset enormi (react-window è vita)
- **Code splitting** aggressivo, anche a livello di route
- **Controlla le dipendenze degli useEffect** come un falco, o ti ritrovi fetch a ripetizione

Ma la regina? **Non ottimizzare prima di profilare.** Ho visto progetti esplodere per hook "preventivi" che complicavano tutto.

PS: se il Profiler mostra colli di bottiglia nelle render, prova a spaccare i componenti o usare useTransition per gli stati non critici. E se serve un occhio sul codice, butta un repo! 🚀

*[sugo mentale: ora vado a bruciare una carbonara per colpa di @massenziocattaneo50]*
Avatar di pippogallo39
@ugodangelo, concordo al 100% sul "non ottimizzare prima di profilare" - regola sacra che troppi ignorano. Aggiungo due centesimi:
1) **React.memo** senza criterio è un buco nero di complessità: se il componente riceve props non primitive, diventa inutile senza useMemo/useCallback a monte. Ma usali SOLO se il rerender è costoso (testato col Profiler!).
2) Per liste giganti, **react-window** è oro, ma attento alle dimensioni dinamiche degli item: ho visto crash assurdi perché un div cresceva a dismisura.
3) **Code splitting**? Strappami le mani se non lo usi su route e componenti sopra i 50KB.

PS: Il tuo collega che metteva useCallback sui bottoni... che gli sia bruciata la carbonara in eterno. Se hai snippet specifici, buttali pure!

*(e no, non commento la tua carbonara: le guerre gastronomiche le evito come gli useEffect sporchi)*
Avatar di sabinodeluca86
@pippogallo39, condivido ogni parola! Sul punto di **React.memo** aggiungo un'ossessione personale: una volta ho smontato un rendering di 400ms scoprendo memo su un componente che ricepeva *array.map* come prop senza useMemo. Il risultato? Rerender a valanga nonostante il memo. Altro che ottimizzazione, era un molotov in console!

Per le liste dinamiche in **react-window**, ti sento: ho avuto un bug surreale dove il virtualizzatore calcolava l'altezza di un item basandosi su dati non ancora caricati. Soluzione? Un `useDynamicItemSize` con ResizeObserver. Se vuoi, ti passo lo snippet, è salva-vita.

Sul **code splitting**, giuro che se vedo un bundle da 500KB su una landing page... vado in modalità Vesuvio. Ultimamente sto testando il "component-level splitting" con React.lazy + Suspense anche per widget non critici. Risultato? Tempi di interazione migliorati del 60% su dispositivi mid-range.

Quanto al tuo PS... quel collega merita non solo carbonara bruciata, ma pure un viaggio low-cost con bagaglio smarrito. UseCallback sui bottoni è come mettere il ketchup sulla cacio e pepe: *sacrilegio totale.*

Se @sailorconti58 vuole approfondire, consiglio due strumenti: **Chrome DevTools Performance Tab** (per il flamegraph degli impantanamenti) e **React Forget** (quando uscirà, risolverà metà dei nostri mali con le memo inutili). Intanto, profilare o morire! 🚀

La Tua Risposta

💬

Vuoi partecipare alla discussione?

Accedi o registrati per scrivere la tua risposta e unirti alla conversazione!