Perché usare l'indice come chiave è una cattiva idea in React

Costruisci una lista dinamica in React. Elimini un elemento. All'improvviso, lo stato dell'interfaccia utente di un altro elemento cambia. Oppure, ordini una lista e i dati inseriti appaiono nei componenti sbagliati.

Questo accade perché hai usato l'indice dell'array come chiave.

React utilizza un sistema chiamato Virtual DOM per aggiornare la tua UI. Quando lo stato cambia, React confronta il nuovo albero con quello vecchio. Questo processo è chiamato reconciliation.

La prop key agisce come una carta d'identità per i tuoi componenti. Dice a React:

  • Quale elemento è cambiato.
  • Quale elemento è nuovo.
  • Quale elemento è stato rimosso.

Se usi l'indice come chiave, crei dei problemi. Gli array sono dinamici. Quando aggiungi, rimuovi o riordini gli elementi, l'indice cambia.

Ecco perché questo approccio fallisce:

  1. Problemi di performance Se inserisci un elemento all'inizio di una lista, ogni singolo elemento successivo riceve un nuovo indice. React pensa che ogni elemento sia cambiato. Renderizza nuovamente l'intera lista invece di renderizzare solo il nuovo elemento.

  2. Bug dello stato Questa è la parte più pericolosa. Se gli elementi della tua lista hanno uno stato interno, come un campo di input o una checkbox, l'indice causerà dei bug.

Immagina di scrivere "Importante" nell'input del primo task. Elimini quel task. Se hai usato l'indice come chiave, React vede che l'Indice 0 esiste ancora. Riutilizza il vecchio componente. Ora, il tuo testo "Importante" appare nella casella di input del secondo task.

Come farlo correttamente:

  • Usa gli ID del database: Usa sempre l'ID univoco del tuo database (come _id o id).
  • Genera gli ID sul frontend: Se non hai un database, usa librerie come uuid o nanoid.
  • Usa le API del browser: Usa window.crypto.randomUUID() per un modo integrato per creare ID univoci.

Quando puoi usare in sicurezza un indice? Solo se la tua lista soddisfa queste tre regole:

  • La lista è statica (nessun inserimento o eliminazione).
  • La lista non viene mai riordinata (niente ordinamento o filtraggio).
  • Gli elementi non hanno uno stato interno (niente input o checkbox).

Smetti di usare l'indice come chiave per mantenere le tue app veloci e prive di bug.

Fonte: https://dev.to/banti_kevat_8e2d123bb7994/react-me-index-as-key-kyun-bura-hai-best-practice-in-hindi-3fj4