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 ...