Les crashs dev d'un passionné
React -Comprendre et utiliser les hooks de React
13 févr. 2020
Dans cet article nous allons nous intéresser aux Hooks de React. Disponibles depuis la version 16.8, les Hooks nous permettent de bénéficier d’un état local et d’autres fonctionnalités de React sans avoir à écrire une classe. Ce sont des fonctions qui permettent de « se brancher » sur la gestion d’état local et de cycle de vie de React depuis des fonctions composants. Ils sont complètement optionnels et 100% rétro-compatibles.
Ce hook permet de créer un composant fonctionnel stateful. Voyons comment on peut l’utiliser pour ajouter un état interne à un composant fonctionnel.
Dans l'exemple ci-dessus, on utilise le hook useState pour initialiser l'état de notre composant en précisant en argument la valeur de départ.
useState retourne une paire : la valeur de l'état actuel et une fonction qui permet de la modifier. La fonction setCountest similaire à this.setState dans une classe.
À noter qu'on peut combiner plusieurs hooks d'état dans un seul composant :
Grâce à la déstructuration positionnelle on peut définir des noms distincts aux variables d'état que nous déclarons en appelant useState.
Ce hook permet aux fonctions composant de gérer des effets de bord comme nous le faisions avec les méthodes componentDidMount, componentDidUpdate et componentWillUnmount dans les classes.
Ajoutons par exemple une fonctionnalité à notre exemple : lorsque la valeur count est mise à jour, on souhaite mettre à jour le titre de la page :
Par défaut, React exécute les effets après chaque affichage, y compris le premier. Toutefois, on peut contrôler l'exécution d'un effet grâce au deuxième argument de la fonction.
Dans l'exemple ci-dessus nous disons au programme d'appliquer la mise à jour du titre uniquement si la valeur de la variable count a changée. Bien que dans cet exemple il est inutile de préciser ce comportement car il est défini par défaut, dans d'autres cas il peut s'avérer être très utile lorsqu'on travaille avec plusieurs variables.
Les effets peuvent aussi préciser comment « nettoyer » les composants en renvoyant une fonction.
Par exemple, ce composant utilise un effet pour s’abonner au statut de connexion d’un ami, et se nettoie en résiliant l’abonnement :
Dans cet exemple, on se désabonne du service lorsque le composant est démonté. Tout comme avec useState, il est possible d'utiliser plusieurs effets d'un composant. Ainsi, on peut organiser les effets de bord dans un composant en rassemblant leurs parties.
Nous allons créer un hook permettant nous abonner au statut d'un ami. Notez que par convention les hooks ont un nom préfixé par use :
On peut ensuite utiliser notre hook comme n'importe quel autre hook :
On a vu les deux hooks les plus importants, mais la nouvelle API propose d'autres hooks très utiles.
Ce hook permet d'éviter de passer de nombreuses props à travers les composants. On peut par exemple utilises les context en remplacement de redux si la logique reste basique.
Similaire à Redux, ce hook retourne un state et une fonction dispatch pour modifier votre store. Il peut être très utile quand vous avez une logique d'état local complexe qui comprend plusieurs sous-valeurs.
Ce hook permet de toujours passer la même instance de votre fonction si les paramètres ne changent pas. C'est utile pour passer des fonctions de rappel à des composants enfants sur une égalité référentielle pour éviter des rendus superflus.
Ce hook permet de mémoriser le résultat d'une fonction tant que les valeurs d'entrée n'ont pas changées. Cela permet d'optimiser les performances en évitant de recalculer le résultat à chaque appel de fonction.
Ce hook permet de définir une référence dans un composant fonctionnel, pour par exemple focus un champ.
Les hooks sont encore une fonctionnalité très récente de React mais qui sont de plus en plus adoptés par les développeurs. L'intérêt est de garder une base de code aisément maintenable et facile à comprendre. De plus, comme nous l'avions vus ça permet également d'optimiser les performances de notre application.
blog comments powered by Disqus
Pourquoi?
- Réutiliser la logique à état sans modifier la hiérarchie des composants.
- Réduire la complexité des composants via un découpage en petites fonctions basées sur des parties qui sont intrinsèquement liées.
- Améliore la lisibilité et la compréhension du code.
Hook à état (useState)
Ce hook permet de créer un composant fonctionnel stateful. Voyons comment on peut l’utiliser pour ajouter un état interne à un composant fonctionnel.
Dans l'exemple ci-dessus, on utilise le hook useState pour initialiser l'état de notre composant en précisant en argument la valeur de départ.
useState retourne une paire : la valeur de l'état actuel et une fonction qui permet de la modifier. La fonction setCountest similaire à this.setState dans une classe.
À noter qu'on peut combiner plusieurs hooks d'état dans un seul composant :
Grâce à la déstructuration positionnelle on peut définir des noms distincts aux variables d'état que nous déclarons en appelant useState.
Hook d'effet (useEffect)
Ce hook permet aux fonctions composant de gérer des effets de bord comme nous le faisions avec les méthodes componentDidMount, componentDidUpdate et componentWillUnmount dans les classes.
Ajoutons par exemple une fonctionnalité à notre exemple : lorsque la valeur count est mise à jour, on souhaite mettre à jour le titre de la page :
Par défaut, React exécute les effets après chaque affichage, y compris le premier. Toutefois, on peut contrôler l'exécution d'un effet grâce au deuxième argument de la fonction.
Dans l'exemple ci-dessus nous disons au programme d'appliquer la mise à jour du titre uniquement si la valeur de la variable count a changée. Bien que dans cet exemple il est inutile de préciser ce comportement car il est défini par défaut, dans d'autres cas il peut s'avérer être très utile lorsqu'on travaille avec plusieurs variables.
Les effets peuvent aussi préciser comment « nettoyer » les composants en renvoyant une fonction.
Par exemple, ce composant utilise un effet pour s’abonner au statut de connexion d’un ami, et se nettoie en résiliant l’abonnement :
Dans cet exemple, on se désabonne du service lorsque le composant est démonté. Tout comme avec useState, il est possible d'utiliser plusieurs effets d'un composant. Ainsi, on peut organiser les effets de bord dans un composant en rassemblant leurs parties.
Construire vos propres Hooks
Nous allons créer un hook permettant nous abonner au statut d'un ami. Notez que par convention les hooks ont un nom préfixé par use :
On peut ensuite utiliser notre hook comme n'importe quel autre hook :
Les autres Hooks
On a vu les deux hooks les plus importants, mais la nouvelle API propose d'autres hooks très utiles.
useContext
Ce hook permet d'éviter de passer de nombreuses props à travers les composants. On peut par exemple utilises les context en remplacement de redux si la logique reste basique.
useReducer
Similaire à Redux, ce hook retourne un state et une fonction dispatch pour modifier votre store. Il peut être très utile quand vous avez une logique d'état local complexe qui comprend plusieurs sous-valeurs.
useCallback
Ce hook permet de toujours passer la même instance de votre fonction si les paramètres ne changent pas. C'est utile pour passer des fonctions de rappel à des composants enfants sur une égalité référentielle pour éviter des rendus superflus.
useMemo
Ce hook permet de mémoriser le résultat d'une fonction tant que les valeurs d'entrée n'ont pas changées. Cela permet d'optimiser les performances en évitant de recalculer le résultat à chaque appel de fonction.
useRef
Ce hook permet de définir une référence dans un composant fonctionnel, pour par exemple focus un champ.
Les hooks sont encore une fonctionnalité très récente de React mais qui sont de plus en plus adoptés par les développeurs. L'intérêt est de garder une base de code aisément maintenable et facile à comprendre. De plus, comme nous l'avions vus ça permet également d'optimiser les performances de notre application.