8 autres hooks React que vous devez connaître

Jan 20, 2024

Par Matthieu Tyson

Architecte logiciel, InfoWorld |

React reste le leader parmi les frameworks d'interface utilisateur JavaScript. De nombreux développements sont en cours dans React, mais le changement le plus important de ces dernières années a été le passage aux composants fonctionnels. Les composants fonctionnels s'appuient sur des hooks pour bon nombre de leurs capacités. Le hook le plus courant est useState, mais il en existe bien d’autres.

Voici un aperçu de huit hooks React utiles que vous ne connaissez peut-être pas et comment les utiliser.

Tout le monde connaît useState car il remplace une fonctionnalité essentielle des composants basés sur les classes (les variables membres contenant l'état) par un équivalent fonctionnel. Le hook useReducer fait quelque chose de similaire, mais pour des scénarios plus complexes dans lesquels les transitions d'état sont plus impliquées et où l'application bénéficie du fait de rendre les transitions explicites. Le hook useReducer est inspiré des réducteurs trouvés dans Redux. Cela peut être considéré comme un juste milieu entre la simplicité de useState et la complexité d'un système de gestion d'état comme Redux.

Voici un exemple de la façon de travailler avec le hook useReducer. Vous pouvez également voir le réducteur en direct dans ce JSFiddle.

Le but de cet exemple est de prendre le texte de la zone de saisie et de laisser l'utilisateur cliquer sur les boutons pour afficher le texte en majuscules ou en minuscules. Le code déclare un nouveau réducteur avec const [state, dispatch] = useReducer(reducer, initialState);. Le useReducer prend la fonction de réduction et l'état initial et renvoie un tableau, que nous déstructurons ensuite pour indiquer et distribuer des variables.

Le réducteur lui-même est défini avec : const réducteur = (état, action) =>, donnant une fonction à deux arguments. Chaque fois que la fonction de répartition est appelée dans le code, elle transmettra l'état actuel avec un objet d'action. Dans ce cas, l'objet d'action a un champ de type et nous l'utilisons pour déterminer comment muter l'état.

Dans une application moyennement complexe, useReducer peut être utile pour gérer la complexité et peut même être partagé dans toute l'application à l'aide du contexte. Lorsque useState est difficile à gérer en raison de la complexité de l’application, le hook useReducer peut vous aider.

Le hook useCallback est un hook de performances. Il prend une fonction et garantit qu'une seule version sera renvoyée et réutilisée pour tous les appelants. Si la fonction est coûteuse et appelée à plusieurs reprises par une boucle ou des composants enfants, le hook useCallback peut générer des gains de performances significatifs. Ce type d'optimisation est appelé mémorisation d'une fonction.

Dans le listing 2, nous avons un exemple d'utilisation de useCallback pour utiliser la même fonction sur de nombreux éléments d'une liste. Voici l'exemple dans un JSFiddle en direct.

Nous utilisons React.useCallback() pour créer une nouvelle fonction mémorisée sur IncreaseCounter. Nous pouvons utiliser la fonction mémorisée comme une fonction normale dans le gestionnaire onClick, dans la liste. useCallback() prend une fonction comme premier argument. Au sein de cette fonction, nous pouvons effectuer tout travail dont nous avons besoin. La principale différence est que React renvoie simplement la valeur mise en cache de la fonction, sauf si quelque chose a changé dans la liste des variables de dépendance, qui dans notre exemple est la variable compteur.

Il s'agit d'un pouvoir magique précieux dans les cas où vous devez partager une fonction coûteuse entre plusieurs appelants, notamment des composants enfants. Gardez à l’esprit que lorsque nous examinons le hook suivant (useMemo), useCallback cache la fonction elle-même. C'est-à-dire que useCallback empêche la recréation de la fonction réelle à chaque fois qu'elle apparaît et ne la recrée que lorsque cela est nécessaire.

Le hook useMemo est le frère de useCallback. Là où useCallback met en cache la fonction, useMemo met en cache la valeur de retour de la fonction. C'est une distinction subtile, mais importante.

Quand devriez-vous utiliser useMemo plutôt que useCallback ? La réponse est : utilisez useMemo lorsque vous le pouvez et useCallback lorsque vous le devez. Le hook useCallback est mérité lorsque le problème de performances que vous évitez est la création de la fonction elle-même dans le rendu, tandis que useMemo n'empêchera pas la recréation de la fonction partout où elle apparaît. Cependant, useMemo garantira que la fonction renvoie une valeur mise en cache si les dépendances n'ont pas changé.