Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

5. Quelques règles supplémentaires sur les Hooks

Avant de continuer, je souhaite vous présenter trois règles que vous devez retenir pour la suite. Rien de compliqué, nous les avons déjà appliquées sans même nous en rendre compte, mais si un jour votre application ne fonctionne pas très bien, il faut que vous sachiez pourquoi. En effet, bien que les Hooks soient des fonctions JavaScript, il y a quelques règles à respecter lorsque vous les utilisez.

Règle n°1 : Appeler les Hooks uniquement au niveau racine

Vous ne devez pas appelé les Hooks à l’intérieur d’une boucle ou d’une condition. Il faut toujours utiliser des Hooks à la racine de vos composants de fonctions, ils ont été conçu pour fonctionner comme ça, et uniquement comme ça. Vous risquez de causer du tort à React sinon.

Règle n°2 : Appelez les Hooks uniquement depuis des composants de fonctions React

Vous devez toujours appeler les Hooks depuis un composant de fonction React. C’est vraiment le seul endroit où cela peut fonctionner. A priori, nous n’avons pas de raisons de les utiliser ailleurs, mais si vous essayé par curiosité, au moins vous êtes prévenus.

Il existe une petite exception, c’est d’appeler un Hook depuis un Hook personnalisé (et oui, ça existe).

En suivant cette règle, vous vous assurez que toute la logique d’état et de cycle de vie d’un composant définie dans son code source, et uniquement à cet endroit.

Règle 3 : Modifier un état de la bonne manière

Lorsque l’on utilise le Hook useState, on reçoit en deuxième argument une méthode permettant de modifier l’état du composant : setFruits, setName, setPokemons, etc. Lorsque vous les utilisez, la valeur de l’état est directement remplacée et non fusionnée. Donc, si vous souhaitez ajouter un élément à un état qui est un tableau, assurez vous de passer le tableau précédent PLUS le nouvel élément (et non juste le nouvel élément), à la méthode permettant de modifier un état. Ainsi, votre état sera mis à jour de la bonne manière.