React Performance con memo lazy Suspense e Profiling — Rendi la tua App Veloce senza Riscrivere Tutto

import React, { memo } from 'react';

const ProductCard = memo(function ProductCard({ name, price, image }) {
  console.log('Rendering:', name); // utile per debug
  return (
    

      
      
{name}
      
€{price.toFixed(2)}
                                                        
                                                                                                                                                                        
    
  );
});

export default ProductCard;

import React, { lazy, Suspense } from 'react';

const AdminPanel = lazy(() => import('./AdminPanel'));

function App() {
  const [showAdmin, setShowAdmin] = useState(false);

  return (
    

       setShowAdmin(true)}>Apri Pannello Admin
      Caricamento in corso…
}>
        {showAdmin && }
      
    

Errori comuni con lazy

• Non usarlo su componenti visibili subito: il primo render aspetta il download, peggiorando il First Paint. Usalo solo per route o sezioni sotto la piega.
• Dimenticare il fallback: senza Suspense, React.lazy non funziona proprio (lancia errore).
• Non combinarlo con il code splitting a livello di route: in React Router, lazy carica ogni route separatamente.

Noi abbiamo applicato questa tecnica su un e-commerce moda con catalogo di 3000 SKU: il bundle iniziale passò da 2.8MB a 1.1MB, e il tempo di interattività (TTI) calò da 7.2s a 3.4s. Il margine su quel negozio? +12% di conversioni.

Come profilare una React app con React DevTools Profiler per identificare colli di bottiglia?

La profilazione è il punto cieco di molti sviluppatori. «L'app è lenta» non è un bug report: è un sintomo. Con il React DevTools Profiler puoi registrare una sessione e vedere esattamente chi si ri-renderizza, per quanto e perché.

Passi operativi per una profilazione efficace

1. Apri React DevTools in Chrome/Firefox, vai alla scheda Profiler.
2. Clicca il pulsante rosso di registrazione (o usa il comando da console: window.__REACT_DEVTOOLS_GLOBAL_HOOK__ per trigger automatici).
3. Interagisci con la UI: filtra, scrolla, apri modali — fai esattamente le azioni che il tuo utente reale fa.
4. Ferma la registrazione: vedrai una flame graph (grafico a fiamma). Cerca barre larghe e rosse — indicano componenti che impiegano molto tempo.
5. Clicca su una barra: nel pannello destro vedrai “why did this render?”: props cambiate, stato locale, contest.

Esempio: debugging con profiler

// Se vedi che MyComponent si ri-renderizza a causa di una nuova funzione passata come prop:
// Prima (ri-crea una funzione a ogni render del genitore):
 doSomething(id)} />

// Dopo (con useCallback):
const handleClick = useCallback(() => doSomething(id), [id]);

Come combinare memo lazy e Suspense per un flusso di caricamento ottimale?

Le tre tecniche non vivono isolate: memo evita re-render inutili, lazy riduce il bundle iniziale, Suspense gestisce il caricamento. Insieme creano un pattern robusto.

Architettura consigliata per app React con sezioni pesanti

import React, { lazy, Suspense, memo } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

const ChartWrapper = memo(function ChartWrapper({ data }) {
  return (
    }>
      
    
  );
});

export default ChartWrapper;

In questo esempio: ChartWrapper è memoizzato — se data non cambia, non si ri-renderizza. HeavyChart è caricato lazy — non entra nel bundle iniziale. Suspense mostra uno scheletro mentre carica. Tre problemi risolti con una combinazione semplice.

Cosa fare adesso

1. Installa React DevTools nel browser se non lo hai già. È il tuo stetoscopio.
2. Apri il Profiler e registra 30 secondi di uso reale della tua app. Identifica i 3 componenti che si ri-renderizzano di più.
3. Applica memo a quei componenti se le loro props non cambiano a ogni render. Verifica la riduzione dei re-render.
4. Trova il modulo più pesante (es. editor, grafico, mappa) e avvolgilo con lazy + Suspense. Misura il bundle size prima/dopo con webpack-bundle-analyzer o Vite’s rollup-plugin-visualizer.
5. Leggi la documentazione ufficiale su React.memo e React.lazy (EN).

Hai un progetto React in produzione? Torna alla guida principale React per il quadro completo.