Les hooks Hooks

Les high-order components et les render props permettent chacun à leur manière de répondre à un même besoin : faire en sorte qu’un composant soit le plus réutilisable possible, notamment en séparant ce qui peut être mutualisé (comportement, affichage de base…) de ce qui doit laisser un certain degré de liberté à l’utilisateur du composant (affichage personnalisé…).

Mais nous avons également vu dans le deuxième chapitre de ce livre que React propose une fonctionnalité qui pourrait également répondre à ce besoin, je parle naturellement des hooks. Nous avons vu comment utiliser certains des hooks standards de React (useState, useCallback, useEffect…), ou encore des hooks apportés par des bibliothèques tierces (useSelector de React Redux, useQuery de Apollo Client), mais bonne nouvelle : on peut également écrire nos propres hooks !

Reprenons par exemple ce que nous avions fait dans la section sur les render props : avoir un composant capable d’afficher la taille actuelle de la fenêtre. Il s’agissait de s’abonner à l’évènement resize de la fenêtre et de conserver cette taille dans un état interne au composant.

En utilisant les hooks, nous nous abonnerons à l’évènement dans useEffect, et nous conserverons la taille dans un état déclaré par useState : useEffect ...