Le rappel setState dans React

1. Pourquoi l’argument de rappel est-il nécessaire ?
2. Quand utiliser le rappel setState() ?

À première vue, la méthode .setState() des composants React semble assez simple. Il met à jour l’état existant pour refléter les changements dans l’argument. Cependant, beaucoup de gens ne savent pas que la méthode .setState() accepte également un autre argument optionnel. Cet argument est une fonction de rappel, qui est exécutée juste après la mise à jour de l’état.

Afin d’écrire un code plus fiable, vous devez comprendre ce que fait la fonction de rappel .setState() et comment vous pouvez l’utiliser.

Pourquoi l’argument de rappel est-il nécessaire ?

La plupart des développeurs React ne savent pas que la méthode .setState() est asynchrone. La mise à jour ne se fait pas immédiatement. Si vous essayez de lire le contenu mis à jour de state juste après un appel .setState(), vous risquez d’échouer ou de lire les mauvaises données.

Pour résoudre ce problème, la méthode setState() prend un autre argument facultatif - une fonction de rappel. Les actions spécifiées dans la fonction de rappel ne seront exécutées qu’après la mise à jour de l’état.

Quand utiliser le rappel setState() ?

Comme nous l’avons mentionné plus haut, l’appel setState est asynchrone. Il ne met pas à jour l’objet d’état immédiatement. Si vous souhaitez effectuer une vérification ou une autre action basée sur la mise à jour la plus récente, l’utilisation du rappel setState() est une bonne pratique. Cependant, ce n’est pas la seule façon d’effectuer de telles opérations. Nous discutons des alternatives dans les sections suivantes.

Le rappel setState() est utile pour ces types d’actions : effectuer des appels à l’API, vérifier le contenu de state pour lancer une erreur de manière conditionnelle, et d’autres opérations qui doivent être effectuées juste après la mise à jour de state . Le rappel setState() est également fréquemment utilisé pour la validation.

Par exemple, si nous voulons utiliser le <input> pour mettre à jour l’état, nous pouvons utiliser la fonction de rappel pour lire la valeur mise à jour avec une certitude absolue. Sans rappel, nous pourrions vérifier les anciennes versions obsolètes de l’état.

Exemple de code :

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render() {
    return (
    <div>
    	<h1>Hello World</h1>
   		<input type="text" 
         onChange={(e) => this.setState({text: e.target.value}, 
         () => console.log(this.state.text))}></input>
    </div>
    )
  }
}

Fonction de rappel vs render()

Les sceptiques pourraient se demander pourquoi j’ai besoin du rappel setState() lorsque je peux accéder à l’state mis à jour dans le corps de la méthode render() ?

La différence est que la méthode render() s’exécutera à chaque fois que l’state est mis à jour, alors qu’un rappel setState() ne s’exécutera qu’après la mise à jour de la valeur spécifique dans state.

.setState() dans une fonction async

Parfois, la méthode .setState() peut être appelée dans les fonctions asynchrones. Dans ce cas, l’état ne sera pas mis à jour immédiatement.

Si vous lisez la valeur de la propriété state en utilisant le mot-clé this, vous obtiendrez une ancienne valeur. En revanche, la fonction callback est appelée une fois la tâche async effectuée.

Alternative

Les documents React recommandent aux développeurs d’utiliser à la place la méthode de cycle de vie componentDidUpdate(), disponible uniquement pour les composants de classe.

Pour les composants fonctionnels, useEffect() peut remplacer efficacement tous les hooks de cycle de vie, y compris componentDidUpdate(). Vous n’avez qu’à personnaliser le tableau de dépendances.

Par exemple, si votre état a une propriété age et que vous souhaitez vérifier sa valeur une fois que l’état est mis à jour, le crochet useEffect() ressemblerait à ceci :

useEffect(()=>console.log(`doing something with ${this.state.age}`), [age])