Padroneggia le liste e le chiavi in React
Renderizzare le liste in React è semplice, ma farlo nel modo corretto è difficile.
Molti sviluppatori usano l'indice dell'array come chiave. È un errore. Porta a bug e prestazioni scarse.
Ecco come dovresti gestire i dati dinamici in React.
Come React utilizza le liste
React utilizza il metodo map() per trasformare gli array in elementi UI. Quando usi map(), React trasforma ogni dato in un componente.
Il ruolo delle chiavi React utilizza un Virtual DOM. Quando i dati cambiano, React confronta i nuovi dati con quelli vecchi. Questo processo è chiamato reconciliation.
Le chiavi fungono da identificatori univoci. Dicono a React esattamente quale elemento è cambiato, si è spostato o è stato eliminato.
Perché usare l'indice come chiave è pericoloso Usare l'indice (0, 1, 2...) come chiave causa tre problemi principali:
- Errori nello stato dei componenti: se ordini una lista, i campi di input o le checkbox potrebbero mostrare i dati dell'elemento sbagliato.
- Calo delle prestazioni: React non riesce a tracciare quale elemento sia quale. Spesso renderizza nuovamente l'intera lista invece di un singolo elemento.
- Bug visivi: la tua UI potrebbe sembrare corretta, ma la logica interna fallirà quando gli elementi cambiano posizione.
Il modo corretto di usare le chiavi Per mantenere la tua app veloce e stabile, segui queste regole:
- Usa ID univoci: usa sempre gli ID del tuo database (come un UUID o una primary key).
- Non usare mai
Math.random(): generare chiavi durante il render causa la ricreazione di ogni singolo elemento a ogni aggiornamento. Questo distrugge le prestazioni. - Mantieni le chiavi stabili: una chiave deve rimanere la stessa per lo stesso dato per tutto il suo ciclo di vita.
Confronto a colpo d'occhio
Caratteristica: Stabilità Uso dell'indice: Instabile Uso di un ID univoco: Altamente stabile
Caratteristica: Prestazioni Uso dell'indice: Scarse Uso di un ID univoco: Ottimali
Caratteristica: Sicurezza dello stato Uso dell'indice: Non sicuro Uso di un ID univoco: Sicuro al 100%
Riassunto per gli sviluppatori
Usa il metodo map(). Passa un ID univoco e stabile alla prop key. Evita di usare l'indice dell'array per qualsiasi lista che possa cambiare, essere ordinata o filtrata.