Diagnosticare e correggere i re-render lenti in React

Prompt

Agisci come specialista di prestazioni React che diagnostica prima di ottimizzare.

Contesto:
- Codice coinvolto: {{codice}}
- Sintomo osservato: {{sintomo}}
- Dati di misurazione (se presenti): {{misurazioni}}
- Versione di React: {{versione_react}}

Se il codice non basta a capire da dove arrivano props o stato, chiedimi i componenti padre o il context prima di proporre modifiche.

Consegna:
1. Ipotesi ordinate per probabilità sul perché dei re-render o del lavoro in eccesso (stato troppo in alto, valore del context che cambia a ogni render, oggetti o funzioni nuovi a ogni render, liste lunghe non virtualizzate, calcoli costosi nel render, key instabili).
2. Come confermare ogni ipotesi con il Profiler dei React DevTools (cosa registrare, cosa guardare nel flamegraph e in «perché è stato renderizzato») e, se utile, con il pannello Performance del browser.
3. Le correzioni, dalla più semplice alla più complessa: spostare lo stato in basso, passare il contenuto come children, dividere il context, useMemo/useCallback/memo solo dove la misurazione lo giustifica, useDeferredValue o useTransition per i campi di testo, virtualizzazione delle liste.
4. Codice prima e dopo per ogni modifica applicata, con l'effetto atteso.
5. Come verificare il miglioramento con la stessa misurazione e quale soglia considerare sufficiente.
6. Cosa non fare: avvolgere tutto in memo, ottimizzare senza misurare o sacrificare la leggibilità per guadagni minimi.

Vincoli:
- Non inventare tempi né miglioramenti percentuali; se non ho misurazioni, spiega come ottenerle e lascia [DA COMPLETARE].
- Se la versione usa React Compiler, tieni conto che memorizza già automaticamente e adatta i consigli.
- Mantieni identico il comportamento funzionale.

Formato: diagnosi, piano di misurazione, modifiche con blocchi di codice e una checklist finale di verifica.

Come usarlo

Esempio d'uso

Esempio di risultato

import { memo, useDeferredValue, useMemo, useState } from 'react';

export function TabellaOrdini({ ordini }: { ordini: Ordine[] }) {
  const [filtro, setFiltro] = useState('');
  const filtroDifferito = useDeferredValue(filtro);
  const visibili = useMemo(
    () => ordini.filter((o) => o.cliente.toLowerCase().includes(filtroDifferito.toLowerCase())), // [DA COMPLETARE: campo reale]
    [ordini, filtroDifferito],
  );
  return (
    <>
      <input value={filtro} onChange={(e) => setFiltro(e.target.value)} aria-label="Filtra ordini" />
      <Righe ordini={visibili} />
    </>
  );
}

const Righe = memo(function Righe({ ordini }: { ordini: Ordine[] }) {
  return <table><tbody>{ordini.map((o) => <RigaOrdine key={o.id} ordine={o} />)}</tbody></table>;
});

Dati chiave

Categoria

Programmazione e sviluppo · React

Tipo di output

Codice

Livello

Avanzato

Pensato per

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Codice coinvolto, Sintomo, Dati di misurazione e Versione di React

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti