Quand utiliser le callback setState de React

Question

Lorsqu'un état d'un composant React change, la méthode de rendu est appelée. Ainsi, pour tout changement d'état, une action peut être effectuée dans le corps des méthodes de rendu. Existe-t-il un cas d'utilisation particulier pour le rappel de setState alors?

Answer 1

Oui, il y en a, car setState fonctionne de manière asynchrone. Cela signifie qu'après avoir appelé setState, la variable this.state n'est pas immédiatement modifiée. Donc si vous souhaitez effectuer une action immédiatement après avoir défini l'état d'une variable d'état, puis renvoyer un résultat, un rappel sera utile

Considérez l'exemple ci-dessous

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Le titre ne peut pas être vide" });
  }
},
....

Le code ci-dessus peut ne pas fonctionner comme prévu car la variable title peut ne pas avoir été modifiée avant la validation. Vous pourriez vous demander si nous pouvons effectuer la validation dans la fonction render() elle-même, mais il serait mieux et plus propre si nous pouvons gérer cela dans la fonction changeTitle elle-même car cela rendrait votre code plus organisé et compréhensible

Dans ce cas, le rappel est utile

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Le titre ne peut pas être vide" });
  }
},
....

Un autre exemple serait lorsque vous voulez dispatch une action lorsque l'état change. vous voudrez le faire dans un rappel et non dans le render() car il sera appelé à chaque nouvelle rendu onState ou lorsque certaines props transmises à le Composant Enfant changé.

Un autre cas est un Appel API

Un cas peut se présenter lorsque vous avez besoin de faire un appel API en fonction d'un changement d'état particulier, si vous le faites dans la méthode render, il sera appelé à chaque rendu onState changement ou parce que certaines Prop transmises au Composant Enfant ont changé.

Dans ce cas, vous voudrez utiliser un rappel de setState pour transmettre la valeur d'état mise à jour à l'appel API

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.FonctionAppelAPI());
},
FonctionAppelAPI: function () {
  // Appeler l'API avec la valeur mise à jour
}
....

Answer 2

this.setState({
    name:'valeur' 
},() => {
    console.log(this.state.name);
});

Answer 3

Le 1er cas d'utilisation qui me vient à l'esprit est un appel api, qui ne devrait pas être placé dans le rendu, car il s'exécutera à chaque changement d'état. Et l'appel API ne doit être effectué que lors de changements d'état spéciaux, et non à chaque rendu.

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

Ainsi, pour tout changement d'état, une action peut être effectuée dans le corps des méthodes de rendu.

Très mauvaise pratique, car la méthode render doit être pure, ce qui signifie qu'aucune action, changement d'état, appel API, ne doivent être effectués, il vous suffit de composer votre vue et de la renvoyer. Les actions doivent être effectuées uniquement lors de certains événements. Le rendu n'est pas un événement, mais par exemple componentDidMount.

Answer 4

Considérez l'appel de setState

this.setState({ counter: this.state.counter + 1 })

IDÉE

setState peut être appelé dans une fonction asynchrone

Donc vous ne pouvez pas vous fier à this. Si l'appel ci-dessus a été fait à l'intérieur d'une fonction asynchrone, this fera référence à l'état du composant à ce moment-là, mais nous nous attendions à ce que cela fasse référence à la propriété à l'intérieur de l'état au moment de l'appel de setState ou au début de la tâche asynchrone. Et comme la tâche était un appel asynchrone, cette propriété a peut-être changé entre-temps. Il n'est donc pas fiable d'utiliser le mot-clé this pour faire référence à certaines propriétés de l'état, c'est pourquoi nous utilisons une fonction de rappel dont les arguments sont previousState et props, ce qui signifie que lorsque la tâche asynchrone est terminée et qu'il est temps de mettre à jour l'état en utilisant l'appel à setState, prevState fera référence à l'état au moment où setState n'a pas encore commencé. Assurant la fiabilité que le nextState ne sera pas corrompu.

Code incorrect : entraînerait une corruption des données

this.setState(
   {counter:this.state.counter+1}
 );

Code correct avec setState ayant une fonction de rappel:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

Ainsi, chaque fois que nous devons mettre à jour notre état actuel vers l'état suivant en fonction de la valeur passée par la propriété juste maintenant, et tout cela se fait de manière asynchrone, il est une bonne idée d'utiliser setState avec une fonction de rappel.

J'ai essayé d'expliquer cela dans codepen ici CODE PEN

Answer 5

Parfois, nous avons besoin d'un bloc de code où nous devons effectuer une opération juste après setState où nous sommes certains que l'état est en train d'être mis à jour. C'est là que le callback de setState entre en jeu

Par exemple, il y avait un scénario où je devais activer un modal pour 2 clients sur 20, pour les clients où nous l'avons activé, il y avait une série d'appels API prenant du temps, donc cela ressemblait à ceci

async componentDidMount() {
  const appConfig = getCustomerConfig();
  this.setState({enableModal: appConfig?.enableFeatures?.paymentModal }, async 
   ()=>{
     if(this.state.enableModal){
       //faire un appel API pour les données nécessaires dans le poput
     }
  });
}

enableModal boolean était nécessaire dans les blocs UI dans la fonction de rendu également, c'est pourquoi j'ai fait setState ici, sinon, j'aurais simplement vérifié la condition une fois et appelé ou non l'API.