Notre premier composant

Hello,

Dans le premier cas tu met à jour ton state en prennant la valeur directement dans le state "this.state.n" à laquel tu ajoute 1 donc l'utilisation du this est obligatoire
Dans le second cas, tu prend la valeur de la callback de la fonction setState ( qui te donne la valeur du state au moment ou tu le demande ) donc tu peux travailler directement avec sans avoir besoin de "this" qui ne fera pas référence à la meme "entité/instance" je sais pas trop comment l'exprimé.

Pour être plus claire, tu aurai pu l'écrire comme ceci.

Exemple 1:
this.setState({ n: this.state.n + 1 }); // fait référence au state de la class

Exemple 2:
this.setState((cbValue, props) => { // fait référence à la callback ( qui te donne la valeur de this.state au moment ou tu le demande )
return {n: cbValue.n + 1}
})

Quand je dis au moment ou tu le demande c'est à dire que si tu fais ça.

class Test extends React.Component {
  state = {
    n: 0,
  };

  click() {
    // De cette maniere "n" ne sera incrémenté que de 1 en 1, le traitement est asynchrone donc tu dois attendre que n soit réellement incrémenté
    this.setState({ n: this.state.n + 1 }); // <= this.state.n = 0 et sera égale à 1 en dehors de la fonction
    this.setState({ n: this.state.n + 1 }); // <= this.state.n est toujours = 0 et sera égale à 1 en dehors de la fonction ici on écrase simplement le premier this.setState()
    console.log("STATE_CLICK1", this.state.n); // Au moment du log "n" sera = ) n + 1
  }

  click2() {
    // De cette maniere "n" sera incrémenté de 2 en 2, le traitement "synchrone" parce que tu te sers de la valeur du state dans le callback, qui te donne la valeur courante
    this.setState((cbValue, props) => {
      console.log("STATE_CBVALUE_1", cbValue);
      // cbValue renvoie la valeur de this.state.n au moment ou tu le demande
      return { n: cbValue.n + 1 }; // <= cbValue.n et this.state.n = 0 et seront égale à 1 en dehors de la fonction
    });
    this.setState((cbValue, props) => {
      console.log("STATE_CBVALUE_2", cbValue);
      // <= cbValue.n et this.state.n = 1 et seront égale à 2 en dehors de la fonction
      return { n: cbValue.n + 1 };
    });
    console.log("STATE_CLICK2", this.state.n);
  }

  render() {
    return (
      <>
        <button onClick={() => this.click()}>CLICK 1</button>
        <button onClick={() => this.click2()}>CLICK 2</button>
      </>
    );
  }
}

export default Test;