Comment forcer un composant React à être rerendu (rerender) ?

En développant avec le framework JavaScript ReactJS, vous avez le choix entre 2 types de composants : les composants de classe et les composants fonctionnels. Alors que les premiers sont des classes à part entière, les deuxièmes sont stockés dans des fonctions et utilisent des Hooks afin de proposer des fonctionnalités similaires. Vous n'avez pas en principe à forcer le rendu d'un composant. Il va modifier son rendu lorsque son état sera mis à jour, mais cela peut être intéressant de le faire lorsque vous testez votre application. Pour un composant fonctionnel, il faut alors se servir des Hooks pour le faire.

Si vous souhaitez forcer un rendu de votre composant, alors vous allez devoir utiliser la fonction "useState()", appelée aussi le Hook d'état dans la documentation du framework. Cette fonction retourne deux paramètres. Le premier est la valeur actuelle de la variable d'état du composant. Le deuxième paramètre est une fonction qui va permettre de modifier la valeur de la variable d'état. C'est ce deuxième paramètre qui va permettre de forcer le rendu d'un composant. Vous devez ensuite faire appel à un autre Hook, "useCallback()" pour encapsuler un appel de la fonction de mise à jour avec un objet vide. La mise à jour d'un composant n'a lieu que si la valeur de la variable d'état change. En passant un objet, vous êtes sûr que la mise à jour a lieu, car un nouvel objet diffère par défaut de l'ancien (ils n'occupent pas la même adresse dans la mémoire). Ensuite, vous n'avez plus qu'à appeler la fonction de mise à jour quand vous en avez besoin pour mettre à jour le composant.

//Récupération de la fonction de mise à jour
const [, fctMiseAJour] = React.useState();
//Encapsulation de l'appel
const miseAJour = React.useCallback(() => fctMiseAJour({}), []);
//Appel pour forcer le rendu du composant
miseAJour()

La documentation du framework propose également sa propre solution pour forcer le rendu d'un composant. Il est conseillé d'éviter le plus possible ce genre de pattern. La solution proposée par les développeurs fait appel au Hook "useReducer()". Ce Hook propose une version plus rapide à écrire de "useState()". On peut lui passer un changement direct de variable d'état. Il facilite l'écriture quand la valeur de la variable d'état dépend de la valeur précédente. Dans ce cas, on l'utilise pour créer un compteur que l'on incrémente. La fonction retournée par "useReducer()" va du coup incrémenter automatiquement le compteur à chaque appel et forcer ainsi le rendu du composant.

//Création d'un compteur, qui force donc le rendu du composant à chaque appel
const [ignored, fctMiseAJour] = useReducer(x => x + 1, 0);

//Appel pour forcer le rendu du composant
fctMiseAJour();