Comment modifier correctement l'état des composants…

Le changement d'état dans React se produit via la méthode setState pour les composants de classe ou en utilisant le hook useState pour les composants fonctionnels.

Composants de classe :

// Importons React
import React, { Component } from 'react';

// Créons un composant de classe
class MyComponent extends Component {
  // Initialisons l'état
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Méthode pour changer l'état
  incrementCount = () => {
    // Utilisons setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Compteur : {this.state.count}</p>
        <button onClick={this.incrementCount}>Augmenter</button>
      </div>
    );
  }
}

// Exportons le composant
export default MyComponent;

setState est asynchrone.
setState fusionne le nouveau état avec l'actuel (shallow merge).
setState peut accepter une fonction qui retourne un nouveau état basé sur le précédent:

// Méthode pour changer l'état en utilisant une fonction
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Composants fonctionnels (avec useState) :

// Importons React et useState
import React, { useState } from 'react';

// Créons un composant fonctionnel
function MyFunctionComponent() {
  // Initialisons l'état avec useState
  const [count, setCount] = useState(0); // [état actuel, fonction de mise à jour]

  // Fonction pour changer l'état
  const incrementCount = () => {
    // Utilisons la fonction pour mettre à jour l'état
    setCount(count + 1);
  };

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={incrementCount}>Augmenter</button>
    </div>
  );
}

// Exportons le composant
export default MyFunctionComponent;

useState retourne un tableau avec deux éléments : l'état actuel et la fonction pour le mettre à jour.
La fonction de mise à jour de l'état, retournée par useState, remplace l'état actuel, ne le fusionne pas.
On peut passer une fonction à la fonction de mise à jour si le nouveau état dépend de l'ancien:

// Fonction pour changer l'état en utilisant une fonction
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Points importants lors de la modification de l'état :

Ne modifiez pas l'état directement : Ne jamais attribuer une nouvelle valeur à la propriété state directement (par exemple, this.state.count = 5 ou count = 5). React ne détectera pas ce changement et le composant ne sera pas rerendu.
Modification d'objets et de tableaux : Lors de la modification d'objets ou de tableaux dans l'état, créez toujours de nouvelles copies. React compare les références des objets/tableaux, et si la référence ne change pas, React suppose que les données n'ont pas changé et ne rerendra pas.

// Modification d'un objet dans un composant de classe
this.setState(prevState => ({
  user: {
    ...prevState.user, // Copie des anciennes propriétés
    name: 'Nouveau nom' // Mise à jour de la propriété nécessaire
  }
}));

// Modification d'un tableau dans un composant fonctionnel
setItems(prevItems => [...prevItems, 'Nouvel élément']); // Ajoute un nouvel élément

Asynchronie de setState : Si vous avez besoin d'effectuer une action après que l'état a été mis à jour et que le composant a été rerendu, utilisez le second argument de setState (une fonction de rappel) ou le hook useEffect dans les composants fonctionnels.

// Callback dans setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('État mis à jour!');
});

// useEffect pour réagir à la modification de l'état
useEffect(() => {
  console.log('L'état count a changé:', count);
}, [count]); // Dépendance : le hook s'exécute lors du changement de count

Comparaison des méthodes :

Caractéristique	Composant de classe (`setState`)	Composant fonctionnel (`useState`)
Syntaxe	Méthode `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Fusion/Replacemente	Fusionne le nouveau état avec l'actuel (shallow merge)	Remplace l'état actuel par le nouveau
Asynchronie	Asynchrone	La fonction de mise à jour est asynchrone lorsqu'elle est appelée depuis des gestionnaires d'événements, mais synchrone lorsqu'elle est appelée dans la phase de rendu de React
Dépendance de l'état précédent	Passer une fonction à `setState`: `this.setState(prevState => ({...}))`	Passer une fonction à la fonction de mise à jour: `setState(prev => ({...}))`

Comment modifier correctement l'état des composants dans React?