La proprietà Key in React

Come sappiamo, React cerca sempre di ottimizzare le performance di una applicazione e lo fa modificando solo le parti di codice HTML che cambiano tra un ciclo di rendering e l’altro. key ci permette di prendere il controllo di questo meccanismo, dichiarando a React quale stato o parte di stato coincide con quale elemento o componente.

La possibilità di controllare “manualmente” il meccanismo con cui React capisce quale elemento o componente corrisponde a quale informazione è utile in una serie di casi. Nei casi delle liste, invece, è obbligatorio: React non ha modo di distinguere l’uno dall’altro componenti o elementi che sono allo stesso livello, di conseguenza chiede a noi di farlo, dando un valore univoco a ogni key di ogni elemento o componente.

Con questo nuovo concetto in mente, potremmo renderci conto che index non è un buon valore da dare a key. Sì, index è univoco per ogni elemento della lista, ma quando aggiungiamo nuovi elementi allo stato, tutti gli indici cambiano.

Per esempio, quando aggiungiamo il primo elemento, che possiamo chiamare A, lo stato diventa [A] e l’elemento A ha indice 0 nella lista. Siccome stiamo inserendo i nuovi elementi in cima alla lista, non in fondo, all’aggiunta di un secondo elemento B, lo stato diventa [B, A]. Ora l’indice di B è 0 e l’indice di A è 1. L’indice di A è cambiato, da 0 a 1, ma l’elemento è rimasto identico.

Quando un elemento o componente cambia key, React ne sostituisce completamente l’elemento HTML corrispondente, anche se tutti i suoi attributi o proprietà e contenuto non sono cambiati. Sappiamo che le operazioni sui componenti HTML sono le più onerose da un punto di vista di performance: mantenendo key={index}, stiamo attivamente peggiorando le performance della nostra applicazione!

Ci sono vari modi per risolvere questo problema. La maggior parte delle volte, quando comunichiamo con un back-end, ogni elemento di ogni lista ha qualche tipo di ID univoco, che deriva da una chiave primaria di un database: usare quello, se è disponibile, è l’opzione migliore nel 99% dei casi.

Nel nostro caso, potremmo decidere di assegnare una data di creazione ad ogni elemento, che sarebbe univoca perché il linguaggio JavaScript misura il tempo in millisecondi (creare due elementi nello stesso millisecondo è virtualmente impossibile). Oppure, sapendo che, nel caso specifico, aggiungiamo i nuovi elementi all’inizio dell’array, possiamo invertire gli indici (i.e.: utilizzare todoList.length – index invece di index).

// File: src/App.jsx

import { useState } from "react";
import "./App.css";
import Panel from "./components/Panel";
import TodoItemForm from "./components/TodoItemForm";

export default function App() {
  const [todoList, setTodoList] = useState([]);

  const onTodoItemFormSubmit = (todoItem) => {
    return setTodoList((todoList) => [todoItem, ...todoList]);
  };

  return (
    <div className="App">
      <div className="TodoList">
        {todoList.map((todoItem, index, todoList) => {
          return (
            <div className="TodoItem" key={todoList.length - index}>
              <input type="checkbox" value={todoItem.isDone} disabled />
              <span>{todoItem.description}</span>
            </div>
          );
        })}
      </div>
      <Panel>
        <TodoItemForm onSubmit={onTodoItemFormSubmit} />
      </Panel>
    </div>
  );
}

Ora il primo elemento A ha indice 1, perché [A] ha lunghezza 1 e A ha indice zero e 1 – 0 === 1. All’arrivo del secondo elemento B, [B, A] ha lunghezza 2, B ha indice 2 – 0 === 2 e A mantiene il suo indice 1, calcolato con 2 – 1 === 1.