Les petits secrets de React – la fonction setState()

Cet article s’adresse aux personnes ayant un minimum de connaissance en React particulièrement sur les notions d’état et de cycle de vie dans un composant React.

Voici un petit secret de setState() – c’est en fait un appel asynchrone. React gère les changements d’état de cette façon pour des raisons de performances. Selon la documentation officielle de React : « React peut regrouper plusieurs appels setState () en une seule mise à jour ».

Il est donc possible que le state du composant ne change pas immédiatement après l’appel de setState(). Ce qui signifie surtout que vous ne devriez pas vous fier à la valeur actuelle du state lorsque vous appelez setState(), car vous ne pouvez pas être sûr de la valeur de celui-ci au moment de son exécution !

Cependant cela ne veut pas dire qu’utiliser la méthode setState() de la façon ci-dessous ne fonctionne pas :

Dans cet exemple simple, nous ne rencontrerions probablement aucun problème si nous nous basions sur la valeur du state, mais vous pouvez imaginer qu’une application qui devient de plus en plus complexe avec de nombreux appels setState() concurrents forme une file d’appel qui ne s’exécutent pas nécessairement dans l’ordre que vous souhaitez ou imaginez. La possibilité que la valeur de this.state.showForm ne corresponde pas à vos attentes est dans ce cas est bien réelle. Ce qui peut alors introduire des bugs aléatoires, très dur à reproduire et à localiser.

La solution pour éviter cela, consiste à passer une fonction à setState() avec la valeur du state précédent en tant qu’argument. Ce qui vous assure que dans un contexte d’appel concurrent à setState() votre appel se basera toujours sur la dernière valeur mise à jour du state.


Erreur commune avec setState() :

Il est très commun de vouloir effectuer des traitements après la mise à jour du state comme ceci :

Cependant, comme expliqué précédemment, setState() est une opération asynchrone, ce qui peut alors entrainer des comportements aléatoires de votre application. En effet, il est possible que les traitements suivants l’appel à setState() s’exécute avant la mise à jour de la valeur du state ou pire que celle-ci change pendant vos traitements, faussant alors absolument tout ! 

Si votre traitement doit absolument être réalisé après la mise à jour de la valeur du state, React à tout prévu ! La fonction setState() possède un callback, permettant l’exécution de votre code à la suite de la mise à jour du state.

Il est alors possible de rendre l’exécution de votre code synchrone comme ceci :

En conclusion :

La fonction setState() est puissante et essentielle dans React. Cependant son utilisation est délicate pour les débutants et même les programmeurs expérimentés peuvent introduire facilement des bugs très subtils avec cette fonction. Il faut alors être vigilant et appliquer les conseils de cet article même si cela peut sembler une perte de temps. Vous ne savez pas comment votre application va évoluer alors, autant anticiper au plus tôt des problèmes que peut introduire setState().

Pour éviter les difficultés liées à la méthode setState(), certains développeurs préfèreront utiliser MobX afin de gérer le state de leur application. MobX est une librairie censé simplifier la gestion du state en résolvant le problème fondamental: il est impossible de produire un state incohérent car MobX est synchrone. Cependant je n’ai pas encore eu l’occasion de tester cette solution par moi-même.

Github dans l’écosystème Microsoft

La nouvelle commence a se répendre sur tous les réseaux sociaux, les sites de média, etc… Microsoft vient de racheter Github pour 7,5 milliards de dollars ! Rien que ça… pas moins de 34 Neymar Jr de 2017 !

Cette nouvelle affole la communauté des développeurs, et notamment la communauté du libre.

Pour ma part, j’y vois un signe d’ouverture de la part de Microsoft… d’autres y verront au contraire une volonté de vampirisation. Je vous laisse faire votre propre opinion, mais je pense que tout n’est pas blanc ou noir…. il paraît qu’il peut y avoir une 50aine de nuances de gris.