Array e oggetti negli stati in React

Sappiamo che gli stati in React sono immutabili, cioè non possono essere modificati direttamente, ma dobbiamo chiamare la funzione setter per impostare il prossimo valore dello stato.  L’impossibilità di modificare direttamente gli stati potrebbe, però, mettere in difficoltà chi è abituato a utilizzare linguaggi di programmazione che supportano lo stile imperativo (primo tra tutti, il linguaggio JavaScript stesso). Prendiamo ad esempio un’operazione del genere:

const onDescriptionChange = (description) => {
  setTodoItem((todoItem) => {
    // Non funziona!
    todoItem.description = description;
    return todoItem;
  });
};

per quanto perfettamente lecita in JavaScript, non funzionerà! L’interfaccia non si aggiornerà e non raggiungeremo il risultato che vogliamo ottenere. Invece, per aggiornare lo stato, dobbiamo prima clonarlo e poi impostare le nuove informazioni:

const onDescriptionChange = (description) => {
  setTodoItem((todoItem) => {
    return {
      ...todoItem,
      description,
    };
  });
};

La forma { …todoItem } crea un nuovo oggetto e copia le proprietà dell’oggetto originale (todoItem) all’interno di esso, senza modificare l’oggetto originale (todoItem). Una volta creato il nuovo oggetto, associamo il valore del nostro argomento description alla proprietà “description” del nuovo oggetto. Potremmo scrivere la stessa senza usare lo spread operator (…) né la sintassi ridotta:

const onDescriptionChange = (description) => {
  setTodoItem((todoItem) => {
    return {
      isDone: todoItem.isDone,
      description: description,
    };
  });
};

Immaginiamo un caso come:

return {
  firstName: user.firstName,
  lastName: user.lastName,
  fiscalCode: user.fiscalCode,
  email: user.email,
  addressCountry: user.addressCountry,
  addressProvince: user.addressProvince,
  addressCity: user.addressCity,
  addressStreet: user.addressStreet,
  addressStreetNumber: user.addressStreetNumber,
};

Se dovessimo scrivere tutto questo per ogni event listener, diventeremmo pazzi! E se in futuro aggiungessimo nuove proprietà all’oggetto user, dovremmo andare a ritoccare ogni event listener per aggiungere la nuova proprietà. Usiamo lo spread operator (…) perché, indipendentemente dal numero di proprietà che il nostro oggetto contiene, basta una riga di codice per crearne una copia.

Fun fact: lo spread operator (…) è stato introdotto per gli array con il rilascio di ES6 (EcmaScript 6, standard rilasciato nel 2015). Solo successivamente è stato possibile applicarlo anche agli oggetti, proprio grazie a React, che introdusse questa possibilità molto prima che diventasse lo standard.

Anche quando si tratta di array, c’è una serie di cose che non possono essere fatte nel contesto delle funzioni setter degli stati di React, in quanto modificherebbero l’array originale. E siamo pronti a scommettere che queste cose includono tutti i metodi che la maggior parte degli sviluppatori junior usano normalmente: push, pull, shift, unshift e splice.

Per ogni caso d’uso, c’è una soluzione che rispetta la regola dell’immutabilità. Vediamole tutte.

Aggiungere proprietà a un oggetto in React

// Versione con mutabilità
myObject.newKey = newValue;

// Versione senza mutabilità
const myNewObject = {
  ...myObject,
  newKey: newValue,
};

Modificare proprietà di un oggetto in React

// Versione con mutabilità
myObject.oldKey = newValue;

// Versione senza mutabilità
const myNewObject = {
  ...myObject,
  oldKey: newValue,
};

Rimuovere proprietà da un oggetto in React

// Versione con mutabilità
delete myObject.oldKey;

// Versione senza mutabilità
const { oldKey, ...myNewObject } = myObject;

Utilizziamo la destrutturazione per estrarre la proprietà che non ci serve più. Tutto ciò che rimane (myNewObject) è ciò che ci serve.

Aggiungere elementi a un array in React

// Versione con mutabilità
myArray.push(newFirstElement);
myArray.unshift(newLastElement);

// Versione senza mutabilità
const myNewArray = [firstNewElement, ...myArray, lastNewElement];

push e unshift possono essere effettuate da sole o in contemporanea nella versione immutabile.

Modificare elementi di un array per indice in React

// Versione con mutabilità
myArray[targetIndex] = newValue;

// Versione senza mutabilità
const newArray = myArray.map((oldValue, index) => {
  if (index === targetIndex) {
    return newValue;
  } else {
    return oldValue;
  }
});

In questo caso, la versione immutabile è un po’ più complessa: dobbiamo scorrere l’intero array (map crea internamente una copia dell’array), riutilizzando tutti gli elementi dell’array precedente tranne quello che ci serve, che individuiamo per indice.

Modificare elementi di un array per valore in React

// Versione con mutabilità
const targetIndex = myArray.indexOf(oldValue);

if (targetIndex !== -1) {
  myArray[targetIndex] = newValue;
}

// Versione senza mutabilità
const newArray = myArray.map((value) => {
  if (value === oldValue) {
    return newValue;
  } else {
    return value;
  }
});

Anche in questo caso, dobbiamo scorrere l’intero array (map crea internamente una copia dell’array), riutilizzando tutti gli elementi dell’array precedente tranne quello che ci serve, che individuiamo per valore.

Rimuovere elementi da un array

// Versione con mutabilità
myArray.pop();
myArray.shift();

// Versione senza mutabilità
const [firstOldElement, ...myNewArray, lastOldElement] = myArray;

Come nel caso della rimozione di proprietà da oggetti, sfruttiamo la destrutturazione per ottenere tutto ciò che non è quello che non ci serve, cioè quello che ci serve (i maestri di algebra booleana direbbero che stiamo usando una tautologia: !!useful === useful).