Tout ce que vous devez savoir pour créer des crochets de réaction personnalisés

Apprenons ce qu'il faut pour créer un crochet de réaction sur mesure ainsi que toutes les règles que nous devons garder à l'esprit lors de l'utilisation de crochets.

Les crochets ne sont que des fonctions! Tout ce qui est une fonction peut devenir un crochet. L’équipe de React a fourni de nombreuses informations sur la manière de travailler avec des crochets simples et avancés, mais elle possède également de bonnes informations sur la création de crochets personnalisés. Je couvre le sujet depuis plusieurs mois et je souhaite rassembler tout ce que je sais à leur sujet pour me concentrer maintenant sur un sujet. Créer votre propre crochet personnalisé que vous pouvez facilement partager avec d’autres et qui peut servir de modèle ou d’inspiration pour tout autre crochet que vous décidez de créer. Je pense que la documentation sur le site ReactJS est exhaustive sur le sujet, mais je crains que le manque d’un exemple très simple qui, à mon avis, fera vraiment que l’idée clique pour vous.

Autour de la façon d'obtenir cet exemple dans ce post de blog. C'est parce que je veux que vous soyez prêt à créer des points d'ancrage personnalisés. Bien qu'ils ressemblent beaucoup à la création d'une fonction de base, vous devez connaître davantage d'informations avant de commencer à créer vous-même des crochets personnalisés. Si vous n'avez pas lu sur les crochets, j'ai fourni quelques lectures obligatoires ainsi que quelques articles que j'ai écrits sur le sujet. Il sera peut-être plus facile de passer rapidement en revue ces articles avant de passer aux crochets personnalisés. Je recommande d'abord de comprendre l'API React Hooks, puis de déterminer comment créer vos propres crochets, ce que je vais décrire très simplement à la fin de cet article.

Documentation ReactJS.org

React Conf Recap

React v16 .8: Celui avec des crochets

Introduction aux crochets
Référence de l'API

Mes articles sur les crochets de base

Crochets de réaction basiques pour état et effets
Crochets de réaction basiques pour contexte
Crochets de réaction basiques pour réducteurs

Revenons sur les bases Crochet

Si vous pensez avoir une connaissance suffisante des crochets de base, vous pouvez passer directement à pour créer des crochets personnalisés .

Sans repasser tous les crochets de base, je pense que nous devons simplement revisiter l'un d'eux: le useEffect Hook. J'ai appris en lisant sur Hooks dans les documents ReactJS.org qu'il y avait deux façons d'utiliser useEffect . Vous pouvez l'utiliser sans nettoyage ou avec nettoyage . Ce sont des termes qui, à ce stade de l’utilisation des crochets, doivent savoir ou prendre quelques minutes pour comprendre les liens que je viens de fournir.

Avec les cours et avant que les crochets ne soient disponibles, les effets secondaires ont été placés dans un des nombreux méthodes de cycle de vie telles que: composantDidMount ou composantDidUpdate . Dans les cas où nous avons dupliqué du code dans ces deux méthodes (produisant le même effet pour le montage et la mise à jour), nous pouvons maintenant effectuer ces opérations dans un composant fonctionnel et le faire avec un seul crochet. C'est vrai, je parle de useEffect .

useEffect indique à React que notre composant doit faire quelque chose après le rendu du composant. Il s'exécute après le premier rendu et après chaque mise à jour. Dans mes articles précédents, je ne parlais que des effets secondaires sans nettoyage. Nous devons donc commencer notre apprentissage dès aujourd'hui en comprenant comment permettre à un composant fonctionnel d'avoir un effet secondaire lors du nettoyage. Je pense que pour comprendre comment créer notre propre crochet, nous devons comprendre complètement useEffect car non seulement il s'agit d'un exemple canonique de crochet, mais nous l'utiliserons plus tard dans notre crochet personnalisé. 19659003] Comme je l'ai dit, certains effets n'ont pas besoin d'être nettoyés, ils sont simples, comme ceux que nous avons déjà appris, comme la mise à jour du titre du document.

 useEffect (() => {
  document.title = `Vous avez cliqué sur $ {count} times`;
});

Si vous avez besoin d'un nettoyage, vous pouvez renvoyer une fonction de useEffect . C'est facultatif, mais vous permet d'exécuter du code après votre effet et avant tout nouvel effet. Une situation dans laquelle vous vous abonnez à quelque chose peut nécessiter une désinscription dans le cadre du processus de nettoyage des effets. React effectuera ce nettoyage lors du démontage.

 useEffect (() => {
  console.log ("Souscrire à quelque chose);
  retourne la fonction cleanup () {
    console.log ("Se désabonner de quelque chose);
  };
});

L'effet ci-dessus s'appliquera à tous les rendus plus d'une fois. React nettoie les effets du rendu précédent avant d'exécuter les effets du rendu suivant, cela devrait être noté. Pour une explication sur pourquoi les crochets s'exécutent sur chaque mise à jour consultez la documentation de ReactJS. N'oubliez pas que ce comportement peut être désactivé s'il cause des problèmes de performances.

Nous pouvons aussi optimiser les performances en ignorant les effets avec un argument optionnel . Par exemple, nous ne souhaitons peut-être pas utiliser l'effet abonnement / désabonnement à moins qu'un identifiant n'ait été modifié. Regardez l'exemple ci-dessous pour comprendre comment faire, c'est assez simple!

 useEffect (() => {
  console.log ("Souscrire à quelque chose);
  return () => {
    console.log ("Se désabonner de quelque chose);
  };
}, [props.something.id]); // seulement si quelque chose.id change

Je voudrais également mentionner que si vous avez une logique sans rapport avec votre useEffect vous devriez essayer de reformer le code non lié dans son propre useEffect . Vous pouvez avoir autant d'appels useEffect que vous le souhaitez. Par exemple, les deux appels useEffect ci-dessus pourraient se trouver à l'intérieur du même composant fonctionnel. Cela est autorisé.

Les crochets permettent de scinder le code en fonction de ce qu'il fait plutôt que de la méthode de cycle de vie dans laquelle il est utilisé. Lorsque nous n'avions que des classes et des méthodes de cycle de vie, cela créait un mélange de problèmes. Maintenant, en utilisant plusieurs méthodes useEffect React peut appliquer chaque effet dans l'ordre dans lequel ils ont été spécifiés. Il s'agit d'un avantage énorme pour l'organisation du code dans votre application.

Avantages évidents de l'utilisation de crochets

Les crochets présentent de nombreux avantages pour nous, développeurs, et ils vont changer notre façon d'écrire les composants pour le mieux. Ils nous aident déjà à rédiger un code plus clair et plus concis – c'est comme si nous avions adopté un régime à code, que nous avions perdu beaucoup de poids, que nous avions meilleure mine et que nous nous sentions mieux. Cela fait ressortir notre ligne de la mâchoire et nous fait nous sentir plus légers sur les pieds. C'est le seul changement qui fonctionne réellement pour nous. Il suffit de regarder ce que React Hooks a fait pour les autres!

Blague à part, Hooks coupe vraiment la graisse. Il réduit et rend notre code plus lisible, concis et Pour démontrer, examinons une version de classe de notre "effet de titre de document" canonique et voyons la différence entre notre façon d'écrire quelque chose comme ceci côte à côte avec un exemple utilisant un crochet installé par npm qui fait la même chose. [19659003] Le côté ci-dessous montre comment le composant a perdu un peu de poids: non seulement nous économisons environ cinq lignes de code dans cet exemple simple, mais la lisibilité et la capacité de test s'améliorent également avec la plupart des transformations de Hooks. Il existe probablement dans notre code de nombreuses situations dans lesquelles nous avons la possibilité d’apporter des modifications de ce type, ce qui pourrait avoir un impact significatif sur une base de code unique. Ce changement offre de nombreux avantages, dont le code ci-dessous peut être visualisé dans une démo de StackBlitz: Avant et Après

Je voudrais parler d’une chose de plus avant de créer notre propre crochet personnalisé. Je veux passer en revue cinq règles d'utilisation des crochets. Celles-ci nous ont été transmises par l’équipe de React. C’est pourquoi il est très important de les connaître et vous évitera de créer du code buggy. Cela nous aidera à comprendre quel code doit être intégré à un crochet et ce qu'il ne faut pas.

Cinq règles importantes pour les crochets

Avant de créer notre propre crochet, examinons quelques-unes des règles principales que nous devons toujours respecter. .

1. N'appelez jamais les crochets depuis une boucle, une condition ou une fonction imbriquée
2. Les crochets doivent être placés au niveau supérieur de votre composant
3. N'appeler que les crochets à partir de composants fonctionnels de React
4. N'appelez jamais un crochet d'une fonction standard
5. Les Hooks peuvent appeler d'autres Hooks

Si vous le souhaitez, vous pouvez appliquer ces règles à votre équipe avec un plug-in ES Lint . Également sur cette même page il existe de bonnes explications sur la raison pour laquelle ces règles sont requises. N'hésitez pas à lire à ce sujet, cela prend environ cinq minutes.

Créez votre propre crochet

J'ai vraiment aimé quelque chose qui a été tweeté récemment par Adam Rackis : " Les crochets libèrent un niveau de composition bien supérieur à tout ce que nous avons vu . " Ce que je voudrais que vous compreniez à propos de Hooks, c’est que tous les grands changements que nous avons observés avec Classes et que nous avons tant d’options de composition, eh bien, tout cela est disponible dans Hooks maintenant. Cela signifie que nos mains ne sont plus les mains liées en ce qui concerne la composition des composants fonctionnels dans React. Et cela représente un énorme progrès pour les développeurs de React.

Les fonctions personnalisées en JavaScript sont des fonctions JavaScript dont le nom commence par qui sont appelées et qui peuvent en appeler d’autres. Ainsi, un crochet personnalisé est simplement une fonction normale. En ajoutant le mot utilisé au début, cela nous indique que cette fonction spéciale suit les règles de Hooks énoncées dans la section ci-dessus.

J'ai parcouru toute cette information parce que je voulais vraiment vous devez être prêt à comprendre quand, où et comment utiliser les crochets. Nous allons maintenant faire une dernière chose dans cet article. Nous prendrons ce que je sais comme étant la logique la plus simple que nous connaissions déjà et créerons le crochet personnalisé le plus simple auquel je puisse penser.

Si vous vous en souvenez, nous avions l'exemple de la façon de mettre à jour le titre du document à l'aide de la touche useEffect Crochet. Eh bien, cela semble être quelque chose que nous pourrions vouloir faire sur plusieurs pages ou à l'intérieur de plusieurs composants fonctionnels différents de notre application. Lorsque certains types d'informations changent, nous souhaitons mettre à jour le titre du document avec un type de chaîne. De plus, nous ne voulons pas répéter cette logique dans chaque composant fonctionnel. Nous allons commencer par extraire ce code dans un crochet localement sur la même page, puis voir comment le même crochet peut être importé dans de nombreux composants et co-localisé. C'est assez simple, n'est-ce pas?

Nous savons donc qu'un crochet peut appeler un crochet. Et si cela est vrai, notre crochet personnalisé peut également appeler l'un des crochets de base de React, comme useEffect . Voyez-vous où je vais avec cela? Passons en revue un composant fonctionnel qui met à jour le titre du document une fois de plus. Le code ci-dessous est également visible dans cet exemple de StackBlitz .

 import React, {Component, useState, useEffect} de 'react';

fonction Counter () {
  const [count, setCount] = useState (0);
  const incrementCount = () => setCount (count + 1);
  useEffect (() => {
    document.title = `Vous avez cliqué sur $ {count} times`
  });

  revenir (
    

      
 Vous avez cliqué sur {compte} fois 
       cliquez sur moi 
    
  )
}

export default counter;

Nous voudrions donc créer un crochet personnalisé dans lequel nous transmettons un morceau de texte. Le crochet met à jour le titre du document pour nous. Examinons d’abord le code nécessaire pour créer ce crochet personnalisé:

 const useDocumentTitle = (title) => {
  useEffect (() => {
    document.title = title;
  }, Everything You Need to Know to Create Custom React Hooks)
}

Vous voyez ci-dessus que tout ce dont nous avons besoin de ce crochet est un texte que nous appellerons titre . À l'intérieur du crochet, nous appelons le crochet de base de React Core avec un effet et définissons le titre tant que le titre a changé. Le deuxième argument de useEffect effectuera cette vérification pour nous et ne mettra à jour le titre que si son état local est différent de ce que nous transmettons. Vous voulez dire, créer un crochet personnalisé est aussi simple que créer une fonction? Eh oui, c'est aussi simple que ça, et cette fonction peut référencer n'importe quel autre crochet. Bon sang … Créer des crochets personnalisés est plus facile que nous le pensions!

Voyons à quoi ressemblera notre composant fonctionnel global. Vous verrez que j'ai laissé l'ancien appel à commenté outEffect c'est au-dessus que nous utilisons le crochet personnalisé pour cela à la place. Cela peut être visualisé dans une démo de mise à jour de StackBlitz :

 import React, {Component, useState, useEffect} de 'react';

const useDocumentTitle = title => {
  useEffect (() => {
    document.title = title;
  }, Everything You Need to Know to Create Custom React Hooks)
}

fonction Counter () {
  const [count, setCount] = useState (0);
  const incrementCount = () => setCount (count + 1);
  useDocumentTitle (`Vous avez cliqué sur $ {count} times`);
  // useEffect (() => {
  // document.title = `Vous avez cliqué sur $ {count} times`
  //});

  revenir (
    

      
 Vous avez cliqué sur {compte} fois 
       cliquez sur moi 
    
  )
}

export default counter;

Nettoyons-le un peu plus et voyons comment nous pourrions utiliser ce hook s'il était fourni par un paquet npm au lieu d'être copié-collé en haut de notre fichier. Je vais montrer le code ci-dessous ainsi que le lien vers une démo [19459507] mise à jour de StackBlitz .

 import React, {Component, useState} à partir de 'react';
importer useDocumentTitle de '@ rehooks / document-title';

fonction Counter () {
  const [count, setCount] = useState (0);
  const incrementCount = () => setCount (count + 1);
  useDocumentTitle (`Vous avez cliqué sur $ {count} times`);

  revenir (
    

      
 Vous avez cliqué sur {compte} fois 
       cliquez sur moi 
    
  )
}

export default counter;

C'est fabuleux, mais je tiens également à vous faire remarquer que je ne suis pas obligé d'importer useEffect dans mon composant fonctionnel, car le crochet que j'ai importé à partir du package npm s'en occupe. Donc, si je n'ai pas besoin d'utiliser useEffect dans mon composant fonctionnel car le useDocumentTitle Hook le fait pour moi, je peux omettre cette importation. J'espère que cela illustre les bases de la création d'un crochet de réaction personnalisé et que vous voyez le pouvoir, même avec un exemple aussi simple.

Voici les deux exemples StackBlitz côte à côte si vous souhaitez les partager et jouer! ] Extraire un crochet personnalisé du code existant

Un grand merci à Amit Solanki qui a créé ce fichier. document title Hook disponible sous forme de package npm et Adam Rackis pour avoir présenté un point de vue aussi profond sur Hooks dans un tweet brillant qui m'a incité à écrire sur le sujet. La communauté des développeurs a adopté Hooks et on ne peut pas toujours en dire autant sur les nouvelles fonctionnalités d’un framework lorsqu’ils sont commercialisés pour la première fois. Je tiens également à remercier l'équipe de React pour la façon dont elle prend son temps avec ces fonctionnalités, pour qu'elle reçoive de nombreux commentaires de la part de la communauté, ainsi que pour adopter une stratégie d'adoption progressive pour déployer ce produit étonnant et révolutionnaire!

Cette démo est L’exemple le plus simple auquel je pouvais penser pour illustrer la création d’un crochet à réaction et je ne pouvais pas penser à un meilleur premier crochet à vous présenter afin de vous amener à penser à créer vos propres crochets personnalisés! Le moyen le plus simple de découvrir plus de crochets de réaction que vous pouvez copier et coller dans votre code ou installer npm est de visiter ces liens associés à GitHub:

Copier Coller les crochets de réaction populaires
Awesome React Hooks
Collection de crochets de réaction