React Hooks
par OBELERY le 17 septembre 2019
La technologie JavaScript React ne cesse d’évoluer. Alors que nous sommes habitués de créer nos composants React complexes sous forme de classes, depuis sa version 16.8, React nous propose de remplacer cette pratique par l’utilisation de « Hooks » dans les composants fonctionnels simples. Que sont ces fameux « Hooks » et quels sont les avantages et inconvénients de leur utilisation par rapport aux classes classiques ? C’est ce que nous allons examiner dans cet article.

Revenons tout d’abord sur les concepts de base afin de mieux comprendre l’apport des « Hooks ».
Une classe permet de disposer d’un « State » contenant toutes les valeurs que nous souhaitons utiliser dans notre composant et qui seraient amenées à changer lors de l’exécution de notre programme. Le State étant surveillé par React, tout changement de ce dernier provoque un nouveau rendu complet du composant. La classe permet également d’exécuter du code à certains moments précis de la vie d’un composant ; Par exemple, l’exécution d’un code pour charger des données au moment où le composant est « monté » (chargé) mais pas encore affiché.
Si l’utilisation de classes offre tout un arsenal de possibilités, ces dernières sont gourmandes en ressources et souvent inutiles pour de petits composants ne nécessitant pas de gestion interne de données. De plus, un composant codé sous forme de classe devient vite difficilement maintenable ; sa logique étant éparpillée parmi les différentes méthodes de son cycle de vie, sans compter les passages intempestifs de propriétés entre composants.
Pour trouver plus de simplicité, il faut se tourner vers les « SFC » (Simple Functional Components) : des composants ne nécessitant pas l’utilisation d’une classe et se contentant d’une fonction retournant un résultat. Bien plus légers, ces composants simples conviennent parfaitement pour générer un élément à afficher mais sont dès lors limités à cette tâche. Il apparaît donc un fossé entre la solution « surarmée » des composants de classes et les composants fonctionnels, légers mais limités.
Traditionnellement, une application React constituée de composants de classes et de SFC devenait difficile à maintenir, chaque composant devant contenir l’intégralité de sa logique, même si certaines parties sont communes avec d’autres composants. Sans une bonne documentation ou connaissance des rouages internes d’une application React, il est compliqué de savoir où se fait quoi et quand.
C’est sur ce constat que les « Hooks » entrent en jeu ; Une fois activés, ils permettent à un SFC de bénéficier d’un état local ainsi que d’autres fonctionnalités sans avoir recours à une classe.
On distingue trois types de « Hooks » dans React
Le « hook d’état » useState permet à un composant SFC de disposer d’un état local, tout comme une classe le ferait avec le traditionnel SetState mais sans toute la lourdeur d’un composant de classe.

Le « hook d’effet » useEffect permet d’exécuter du code après l’affichage de votre composant. Son utilisation rappelle l’utilisation des fonctions componentDidMount, componenDidUpdate et componentWillUnmount de nos composants de classe traditionnels.

Le « hook personnalisé » permet quant à lui d’externaliser certaines fonctionnalités utilisées de manière identique par différents composants de votre application, par exemple une méthode de chargement de donnée. Ces « hooks » personnalisés sont en quelque sorte des « minicomposants méthodiques non visuels ». Si ma méthode de chargement de donnée venait à changer, aucun composant de notre application ne serait impacté car seul le fichier de définition de notre « Hook » doit être modifié.Bien plus simple que de devoir passer en revue l’enchevêtrement de composants à la recherche des méthodes de chargement intégrées !
Avec cette nouvelle approche, les futures applications React seront principalement constituées de SFC agrémentés de « Hooks » selon les besoins et partageant des méthodes communes externalisées. Un bon pas dans le sens de la programmation orientée objet !
Et comme toujours avec React, il ne vous faudra pas revoir entièrement votre workflow pour intégrer ces nouveautés : les « Hooks » sont utilisables directement sur vos projets existants puisqu’optionnels et 100 % rétro compatibles. Vous pouvez donc migrer à votre rythme vos applications qui s’en verront plus maintenables et moins gourmandes en ressources.
La documentation officielle concernant les hooks est plutôt complète sur le site de React https://fr.reactjs.org/docs/hooks-intro.html et de nombreuses vidéos sont disponibles sur les plateformes comme Youtube.
N’hésitez pas à venir suivre une mise à niveau pratique les 05 et 06/11 au Cepegra. Intéressé.e ? Inscription sur: formation-cepegra.be/formation/react-initiation/