Mettre à jour les objets d’un état

Qu’est-ce qu’une mutation ?

Vous pouvez stocker n’importe quel type de valeur JavaScript dans l’état.

const [x, setX] = useState(0);

Jusqu’à présent, vous avez travaillé avec des nombres, des chaînes de caractères et des booléens. Ces types de valeurs JavaScript sont « immuables », c’est-à-dire qu’ils ne peuvent pas être modifiés ou sont en « lecture seule ». Vous pouvez déclencher un nouveau rendu pour remplacer une valeur :

setX(5);

L’état x est passé de 0 à 5, mais le nombre 0 lui-même n’a pas changé. Il est impossible en JavaScript de modifier les valeurs primitives comme les nombres, les chaînes de caractères et les booléens.

À présent, considérons un objet dans l’état :

const [position, setPosition] = useState({ x: 0, y: 0 });

Techniquement, il est possible de modifier le contenu de l’objet lui-même. C’est ce qu’on appelle une mutation :

position.x = 5;

Cependant, bien que des objets dans un état React soient techniquement modifiables, vous devez les traiter comme s’ils étaient immuables — au même titre que les nombres, les booléens et les chaînes de caractères. Au lieu de les modifier, vous devriez toujours les remplacer.

Traiter l’état comme en lecture seule

En d’autres termes, vous devez considérer tout objet JavaScript que vous placez dans l’état comme étant en lecture seule.

Cet exemple utilise un objet dans l’état pour représenter la position actuelle du pointeur. Le point rouge est censé se déplacer lorsque vous touchez ou déplacez le curseur sur la zone de prévisualisation. Mais le point reste dans la position initiale :

Le problème se situe dans cette partie du code.

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

Ce code modifie l’objet affecté à position lors du rendu précédent. Mais faute d’utiliser la fonction de mise à jour de l’état, React ne se rend pas compte que l’objet a changé. Par conséquent, React ne réagit pas. Ce serait comme essayer de changer une commande après avoir déjà mangé le repas. Bien que la mutation de l’état puisse fonctionner dans certains cas, nous la déconseillons. Vous devriez considérer la valeur de l’état que vous lisez lors d’un rendu comme étant en lecture seule.

Pour effectivement déclencher un nouveau rendu dans cet exemple, créez un nouvel objet et passez-le à la fonction de mise à jour de l’état :

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

Avec setPosition, vous indiquez à React :

• Remplace position par ce nouvel objet
• Et refais le rendu ce composant

Voyez comme le point rouge suit désormais votre pointeur lorsque vous le touchez ou le survolez dans la zone de prévisualisation :

position.x = e.clientX;
position.y = e.clientY;

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

setPosition({
  x: e.clientX,
  y: e.clientY
});

Copier des objets avec la syntaxe de spread

Dans l’exemple précédent, l’objet position est toujours recréé à partir de la position actuelle du curseur. Ceci dit, vous voudrez souvent inclure des données existantes au sein du nouvel objet que vous créez. Par exemple, vous souhaiterez peut-être mettre à jour un seul champ dans un formulaire, tout en conservant les valeurs précédentes des autres champs.

Ces champs de saisie ne fonctionnent pas car les gestionnaires onChange modifient l’état :

Par exemple, cette ligne modifie l’état à partir d’un rendu précédent :

person.firstName = e.target.value;

La manière fiable d’obtenir le comportement que vous recherchez consiste à créer un nouvel objet et à le passer à setPerson. Mais ici, vous souhaitez également copier les données existantes, puisqu’un seul des champs a changé :

setPerson({
  firstName: e.target.value, // Nouveau prénom venant du champ de saisie
  lastName: person.lastName,
  email: person.email
});

Vous pouvez utiliser la syntaxe de spread sur objets ... afin de ne pas devoir manuellement copier chaque propriété individuellement.

setPerson({
  ...person, // Copie des anciens champs
  firstName: e.target.value // Mais on remplace celui-ci
});

Maintenant, le formulaire fonctionne !

Remarquez que vous n’avez pas déclaré une variable d’état distincte pour chaque champ de saisie. Pour les grands formulaires, regrouper toutes les données dans un objet est très pratique, à condition de les mettre à jour correctement !

Notez que la syntaxe de spread ... est « superficielle » : elle ne réalise une copie des propriétés que sur un niveau. Ça la rend rapide, mais ça signifie également que si vous souhaitez mettre à jour une propriété imbriquée, vous devrez utiliser cette syntaxe plusieurs fois.

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        Prénom :
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Nom de famille :
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        E-mail :
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

Mettre à jour un objet imbriqué

Considérons une structure d’objet imbriquée comme celle-ci :

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

Si vous souhaitez mettre à jour person.artwork.city, c’est facile avec une mutation :

person.artwork.city = 'New Delhi';

Mais avec React, l’état doit être traité comme immuable ! Pour modifier city, vous devez d’abord produire le nouvel objet artwork (pré-rempli avec les données de l’objet précédent), puis produire le nouvel objet person qui pointe vers le nouvel artwork :

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

En une seule instruction, ça donnerait ceci :

setPerson({
  ...person, // Copie les autres champs
  artwork: { // mais remplace l’œuvre d’art
    ...person.artwork, // par la même œuvre d’art
    city: 'New Delhi' // mais à New Delhi !
  }
});

Ça devient un peu verbeux, mais ça fonctionne bien dans de nombreux cas :

let obj = {
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1
};

Écrire une logique de mise à jour concise avec Immer

Si votre état est profondément imbriqué, vous envisagerez peut-être de l’aplanir. Mais si vous ne voulez pas modifier la structure de votre état, vous préférerez peut-être un raccourci aux spreads imbriqués. Immer est une bibliothèque populaire qui vous permet d’écrire votre code en utilisant une syntaxe pratique mais modifiante, et se charge de produire les copies pour vous. Avec Immer, le code que vous écrivez semble « enfreindre les règles » et modifier un objet :

updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

Mais contrairement à une mutation classique, ça n’écrase pas l’état précédent !

Pour essayer Immer :

1. Exécutez npm install use-immer pour ajouter Immer en tant que dépendance
2. Remplacez alors import { useState } from 'react' par import { useImmer } from 'use-immer'.

Voici l’exemple ci-dessus converti en Immer :

Remarquez à quel point les gestionnaires d’événements sont devenus plus concis. Vous pouvez mélanger et combiner useState et useImmer dans un seul composant autant que vous le souhaitez. Immer est un excellent moyen de garder les gestionnaires de mise à jour concis, surtout s’il y a des niveaux d’imbrication dans votre état, et que la copie des objets conduit à un code répétitif.