React Academy · Lezione

Best practice per key e ref

Usare key stabili, evitare i problemi delle key basate sull'indice e lavorare con i callback ref.

Best practice per key e ref è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione imparerà a usare correttamente le key degli elenchi, perché usare l'indice dell'array come key causa problemi e come lavorare con le ref callback e le ref inoltrate.

Perché le key sono importanti

React usa le prop `key` per tenere traccia degli elementi di un elenco che sono cambiati, sono stati aggiunti o rimossi tra un rendering e l'altro. Una key corretta consente a React di riutilizzare i nodi DOM esistenti; una key errata causa smontaggi e rimontaggi non necessari.

Key univoche e stabili

La key migliore è un ID stabile e univoco proveniente dai dati, come l'ID di una riga del database o un UUID. Questa key deve essere univoca solo tra gli elementi fratelli, non a livello globale nell'intera pagina.

users.map(user => (
  <UserCard key={user.id} user={user} />
))

Perché usare l'indice come key è problematico

Usare l'indice dell'array come key funziona per gli elenchi statici, ma causa problemi negli elenchi ordinati o filtrati. Quando gli elementi cambiano ordine, React associa i componenti in base all'indice e riutilizza i nodi DOM errati, corrompendo i valori degli input e lo stato delle animazioni.

// Risky when list can reorder or filter
items.map((item, i) => <Row key={i} {...item} />)

Quando è accettabile usare l'indice come key

Usare l'indice come key è accettabile solo quando: (1) l'elenco non viene mai riordinato né filtrato, (2) gli elementi non hanno un ID stabile e (3) gli elementi non hanno uno stato locale, ad esempio i valori degli input. Gli elenchi di visualizzazione statici vanno bene.

Generare ID stabili

Se i dati non hanno un ID, ne generi uno quando crea l'elemento, non durante il rendering. Può usare `crypto.randomUUID()` o la libreria `nanoid`.

const newItem = { id: crypto.randomUUID(), text: 'Buy milk' };

Nozioni di base su useRef

`useRef` restituisce un oggetto mutabile il cui valore `.current` persiste tra i rendering senza causare nuovi rendering. Viene usato per conservare riferimenti al DOM e valori mutabili, come gli ID dei timer.

const inputRef = useRef(null);
<input ref={inputRef} />
// Access DOM node: inputRef.current.focus();

Ref callback

Invece di passare un oggetto ref, può passare una **ref callback**, cioè una funzione che React chiama con il nodo DOM quando viene montato e con `null` quando viene smontato. Questo consente di configurare la logica esattamente quando il nodo diventa disponibile.

function Input() {
  return (
    <input
      ref={node => {
        if (node) node.focus();
      }}
    />
  );
}

forwardRef per le ref dei componenti

I componenti funzione non accettano `ref` come prop normale. Racchiuda il componente in `React.forwardRef` per consentire ai componenti genitori di collegare una ref a un nodo DOM interno.

const FancyInput = React.forwardRef((props, ref) => (
  <input ref={ref} className="fancy" {...props} />
));

// Parent
const inputRef = useRef(null);
<FancyInput ref={inputRef} />

useImperativeHandle

Quando un componente genitore conserva una ref a un componente figlio, può controllare esattamente ciò che quest'ultimo espone usando `useImperativeHandle`. In questo modo il DOM interno del componente figlio rimane privato, offrendo al contempo un'API imperativa pulita.

const Child = forwardRef((_, ref) => {
  const innerRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => innerRef.current.focus(),
  }));
  return <input ref={innerRef} />;
});

Verifica rapida

Perché dovrebbe evitare di usare l'indice dell'array come key in un elenco che può essere riordinato?

Riepilogo

Usi gli ID stabili dei dati come key, eviti le key basate sull'indice negli elenchi dinamici, usi useRef per accedere al DOM e conservare valori mutabili, usi le ref callback per la logica di montaggio e smontaggio e usi forwardRef per esporre le ref dei componenti figli.

Prossimo argomento

Prossima lezione: **Struttura delle cartelle e convenzioni di denominazione** — organizzerà un progetto React con cartelle basate sulle funzionalità e nomi di file coerenti.

Domande Frequenti

La lezione «Best practice per key e ref» è gratuita?

Sì — il testo completo di «Best practice per key e ref» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Best practice per key e ref»?

Usare key stabili, evitare i problemi delle key basate sull'indice e lavorare con i callback ref. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Best practice per key e ref»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Cosa fa StrictMode
Componenti puri ed evitare effetti collaterali nel render
Best practice per key e ref
Struttura delle cartelle e convenzioni di denominazione

← Torna a React Academy