React Hooks est un nouvel ajout à React 16.8 qui vous permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire un composant de classe . En d'autres termes, Les crochets sont des fonctions qui vous permettent de «vous accrocher» aux caractéristiques d'état React et de cycle de vie à partir des composants de fonction. (Ils ne fonctionnent pas à l'intérieur des composants de la classe .)

React fournit quelques crochets intégrés comme useState . Vous pouvez également créer vos propres crochets pour réutiliser le comportement avec état entre les différents composants. L'exemple ci-dessous montre un compteur dont l'état est géré à l'aide du hook useState () . Chaque fois que vous cliquez sur le bouton, nous utilisons setCount () pour mettre à jour la valeur de count par 1 .

Cet exemple affiche un compteur avec une valeur de 0 . Lorsque vous cliquez sur le bouton, il incrémente la valeur de 1 . La valeur initiale du composant est définie à l'aide de useState .

 const [count, setCount] = useState (0) 

Comme vous pouvez le voir, nous la définissons comme étant 0 . Ensuite, nous utilisons la méthode onClick () pour appeler setCount lorsque nous voulons incrémenter la valeur.

  setCount (count + 1)}>
  Cliquez moi
 

Avant la sortie de React Hooks, cet exemple aurait utilisé plus de lignes de code, car nous aurions dû utiliser un composant de la classe .

Rules Of React Hooks

Avant de nous plonger dans les meilleures pratiques, nous devons comprendre les règles de React Hooks qui sont également certains des concepts fondamentaux des pratiques présentées dans cet article.

React Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lors de leur utilisation.

• Appeler des crochets au niveau supérieur,
• Appeler uniquement des crochets à partir de composants React.

Remarque : Ces deux règles ont été introduites dans React Hooks, par opposition à faisant partie de JavaScript lui-même.

Examinons ces règles plus en détail.

Appeler des crochets au niveau supérieur

N'appelez pas des crochets à l'intérieur de boucles, de conditions ou de fonctions imbriquées. Utilisez toujours des crochets au niveau supérieur de votre fonction React. En suivant cette règle, vous vous assurez que les hooks sont appelés dans le même ordre à chaque rendu d'un composant. C'est ce qui permet à React de préserver correctement l'état des crochets entre plusieurs appels useState et useEffect .

Créons un composant Form qui aura deux états:

Ces états auront des valeurs par défaut, nous utiliserons le crochet useEffect pour conserver l'état sur le stockage local de notre navigateur ou sur le titre de notre document.

Maintenant, ce composant sera peut-être pour réussir à gérer son état s'il reste le même entre plusieurs appels de useState et useEffect .

 function Form () {
  // 1. Utilisez la variable d'état accountName
  const [accountName, setAccountName] = useState ('David');

  // 2. Utilisez un effet pour conserver le formulaire
  useEffect (function persistForm () {
    localStorage.setItem ('formData', accountName);
  });

  // 3. Utilisez la variable d'état accountDetail
  const [accountDetail, setAccountDetail] = useState ('Actif');

  // 4. Utiliser un effet pour mettre à jour le titre
  useEffect (fonction updateStatus () {
    document.title = accountName + '' + accountDetail;
  });

  // ...
} 

Si l'ordre de nos Hooks change (ce qui peut être possible lorsqu'ils sont appelés en boucles ou conditionnelles), React aura du mal à trouver comment conserver l'état de notre composant.

 // - ----------
useState ('David') // 1. Initialisez la variable d'état accountName avec 'David'
useEffect (persistForm) // 2. Ajouter un effet pour conserver le formulaire
useState ('Active') // 3. Initialisez la variable d'état accountdetail avec 'Active'
useEffect (updateStatus) // 4. Ajouter un effet pour mettre à jour le statut

// -------------
// Deuxième rendu
// -------------
useState ('David') // 1. Lisez la variable d'état accountName (l'argument est ignoré)
useEffect (persistForm) // 2. Remplacez l'effet de persistance du formulaire
useState ('Active') // 3. Lisez la variable d'état accountDetail (l'argument est ignoré)
useEffect (updateStatus) // 4. Remplacez l'effet de mise à jour du statut

// ... 

C'est l'ordre que React suit pour appeler nos crochets. La commande restant la même, elle pourra conserver l'état de notre composant. Mais que se passe-t-il si nous plaçons un appel Hook dans une condition?

 // ? Nous enfreignons la première règle en utilisant un Hook dans une condition
  if (accountName! == '') {
    useEffect (function persistForm () {
      localStorage.setItem ('formData', accountName);
    });
  } 

La condition accountName! == '' est vraie sur le premier rendu, nous exécutons donc ce crochet. Cependant, lors du rendu suivant, l'utilisateur peut effacer le formulaire, rendant la condition fausse . Maintenant que nous ignorons ce crochet pendant le rendu, l'ordre des appels du crochet devient différent:

 useState ('David') // 1. Lisez la variable d'état accountName (l'argument est ignoré)
// useEffect (persistForm) // ? Ce crochet a été ignoré!
useState ('Active') // ? 2 (mais était 3). Impossible de lire la variable d'état accountDetails
useEffect (updateStatus) // ? 3 (mais était 4). Impossible de remplacer l'effet 

React ne saurait pas quoi retourner pour le deuxième useState appel de hook. React s'attendait à ce que le deuxième appel Hook dans ce composant corresponde à l'effet persistForm tout comme lors du rendu précédent – mais ce n'est plus le cas. À partir de ce moment, chaque appel Hook suivant celui que nous avons ignoré changerait également d'un – ce qui entraînerait des bugs.

C'est pourquoi les Hooks doivent être appelés au niveau supérieur de nos composants. Si nous voulons exécuter un effet conditionnellement, nous pouvons mettre cette condition à l'intérieur de notre crochet.

Remarque : Consultez les documents React Hook pour en savoir plus sur ce sujet.

Appelez uniquement les hooks à partir des composants React

N'appelez pas les hooks à partir des fonctions JavaScript standard. Au lieu de cela, vous pouvez appeler Hooks à partir des composants de la fonction React. Voyons ci-dessous la différence entre la fonction JavaScript et le composant React:

Fonction JavaScript

 import {useState} = "react";

fonction toCelsius (fahrenheit) {
  const [name, setName] = useState ("David");
  retour (5/9) * (fahrenheit-32);
}
document.getElementById ("demo"). innerHTML = toCelsius; 

Ici, nous importons le crochet useState du package React, puis déclarons notre fonction. Mais ceci n'est pas valide car il ne s'agit pas d'un composant React.

Fonction React

 importez React, {useState} de "react";
importer ReactDOM depuis "react-dom";

Fonction compte (accessoires) {
  const [name, setName] = useState ("David");
  retour 
 Bonjour, {name}! Le prix est  {props.total}  et le montant total est  {props.amount} 
}
ReactDom.render (
  ,
  document.getElementById ('root')

Même si le corps des deux semble similaire, ce dernier devient un composant lorsque nous importons React dans le fichier. C'est ce qui nous permet d'utiliser des choses comme JSX et des crochets React à l'intérieur.

S'il vous arrivait d'importer votre crochet préféré sans importer React, ce qui en fait une fonction régulière, vous ne pourrez pas pour utiliser le hook que vous importez car le hook n'est accessible que dans le composant React.

• ✅ Appeler des hooks à partir de hooks personnalisés

Un hook personnalisé est une fonction JavaScript dont le nom commence par "use" et qui peut appeler d'autres hooks . Par exemple, useUserName sous un crochet personnalisé qui appelle les crochets useState et useEffect . Il récupère les données d'une API, parcourt les données et appelle setIsPresent () si le nom d'utilisateur spécifique qu'il a reçu est présent dans les données de l'API.

 exportation de la fonction par défaut useUserName (userName) {
  const [isPresent, setIsPresent] = useState (false);
  
  useEffect (() => {
    const data = MockedApi.fetchData ();
    data.then ((res) => {
      res.forEach ((e) => {
        if (e.name === userName) {
          setIsPresent (true);
        }
     });
    });
  });
    
  return isPresent;
} 

Nous pouvons ensuite réutiliser la fonctionnalité de ce crochet dans d'autres endroits où nous en avons besoin dans notre application. Dans de tels endroits, sauf en cas de besoin, nous n'avons plus besoin d'appeler useState ou useEffect .

En suivant cette règle, vous vous assurez que toute la logique avec état d'un composant est

Plugin ESLint

Le plugin ESLint appelé eslint-plugin-react-hooks applique les règles ci-dessus. Cela est utile pour faire respecter les règles lorsque vous travaillez sur un projet. Je vous suggère d'utiliser ce plugin lorsque vous travaillez sur votre projet, en particulier lorsque vous travaillez avec d'autres. Vous pouvez ajouter ce plugin à votre projet si vous souhaitez l'essayer:

 // Votre configuration ESLint
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "règles": {
    // ...
    "react-hooks / rules-of-hooks": "error", // Vérifie les règles des Hooks
    "react-hooks / exhaustif-deps": "warn" // Vérifie les dépendances d'effet
  }
} 

Ce plugin est inclus par défaut dans Create React App . Vous n'avez donc pas besoin de l'ajouter si vous amorcez vos applications React à l'aide de Create-React-App.

Thinking In Hooks

Examinons brièvement les composants de la classe et les composants fonctionnels (avec

La manière la plus simple de définir un composant dans React est d'écrire une fonction JavaScript qui renvoie un élément React:

 fonction Welcome (props) {
  retour 
 Bonjour, {props.name} 
;
} 

Le composant Bienvenue accepte les accessoires qui est un objet qui contient des données et renvoie un élément React. Nous pouvons ensuite importer et rendre ce composant dans un autre composant.

Le composant de classe utilise une méthodologie de programmation appelée Encapsulation qui signifie essentiellement que tout ce qui concerne le composant de classe y vivra. . Les méthodes du cycle de vie ( constructeurs componentDidMount () render etc.) donnent aux composants une structure prévisible.

L'encapsulation est l'un des principes fondamentaux de la POO ( O bject- O orienté P programmation). Il fait référence au regroupement de données dans les méthodes qui opèrent sur ces données, et est utilisé pour masquer les valeurs ou l'état d'un objet de données structuré à l'intérieur d'une classe – empêchant les parties non autorisées d'y accéder directement.

Avec Hooks, le

Composant de fonction

L'exemple ci-dessous montre comment des crochets personnalisés peuvent être utilisés dans un composant fonctionnel (sans montrer ce que le corps est). Cependant, ce qu'il fait ou peut faire n'est pas limité. Il peut s'agir d'instancier des variables d'état, de consommer des contextes, de souscrire le composant à divers effets secondaires – ou de tout ce qui précède si vous utilisez un hook personnalisé!

 function {
  useHook {...};
  useHook {...};
  useHook {...};
  revenir (
    
 ... 
  );
} 

Composant de classe

Un composant de classe vous oblige à étendre à partir de Composant React et à créer une fonction de rendu qui renvoie un élément React. Cela nécessite plus de code mais vous donnera également quelques avantages.

 class {
  constructeur (accessoires) {...}
  componentDidMount () {...}
  componentWillUnmount () {...}
  render () {...}
} 

Il y a certains avantages que vous obtenez en utilisant des composants fonctionnels dans React:

1. Il sera plus facile de séparer le conteneur et les composants de présentation, car vous devez réfléchir davantage à l'état de votre composant si vous n'avez pas accès à setState () dans votre composant.
2. Les composants fonctionnels sont beaucoup plus faciles à lire et à tester car ce sont des fonctions JavaScript simples sans état ni crochets de cycle de vie.
3. Vous vous retrouvez avec moins de code.
4. L'équipe React a mentionné qu'il pourrait y avoir une amélioration des performances pour les composants fonctionnels dans les futures versions de React.

Cela mène à la première meilleures pratiques lors de l'utilisation de React Hooks.

Hooks Best Practices

1. Simplifiez vos crochets

Garder React Hooks simple vous donnera le pouvoir de contrôler et de manipuler efficacement ce qui se passe dans un composant tout au long de sa durée de vie. Évitez autant que possible d'écrire des crochets personnalisés ; vous pouvez incorporer un useState () ou useEffect () au lieu de créer votre propre crochet.

Si vous vous retrouvez à utiliser un tas de crochets personnalisés qui sont liés à la fonctionnalité , vous pouvez créer un crochet personnalisé qui fait office de wrapper pour ceux-ci. Jetons un œil à deux composants fonctionnels différents avec des crochets ci-dessous.

Functional Component v1

 function {
  useHook (...);
  useHook (...);
  useHook (...);
  revenir(
    
 ... 
  );
} 

Functional Component v2

 function {
  useCustomHook (...);
    useHook (...);
    useHook (...);
  revenir(
    
 ... 
  );
} 

v2 est une meilleure version car il maintient le crochet simple et tous les autres useHook sont alignés en conséquence. Cela nous permet de créer des fonctionnalités qui peuvent être réutilisées sur différents composants et nous donne également plus de pouvoir pour contrôler et manipuler efficacement nos composants. Au lieu d'adopter la v1 dans laquelle nos composants sont jonchés de crochets, vous devriez utiliser la v2 qui rendra le débogage facile et votre code propre.

2. Organisez et structurez vos hooks

L'un des avantages de React Hooks est la possibilité d'écrire moins de code facile à lire. Dans certains cas, la quantité de useEffect () et useState () peut encore prêter à confusion. Lorsque vous gardez votre composant organisé, cela aidera à la lisibilité et gardera le flux de vos composants cohérent et prévisible. Si vos crochets personnalisés sont trop compliqués, vous pouvez toujours les décomposer en sous-crochets personnalisés. Extrayez la logique de votre composant vers des crochets personnalisés pour rendre votre code lisible.

3. Utiliser les extraits de code React Hooks

Les extraits de code React Hooks sont une extension de code de Visual Studio pour rendre React Hooks plus facile et plus rapide. Actuellement, cinq crochets sont pris en charge:

• useState ()
• useEffect ()
• useContext ()
• useCallback ()
• useMemo ()

D'autres extraits ont également été ajoutés. J'ai essayé de travailler avec ces crochets et c'est l'une des meilleures pratiques que j'ai personnellement utilisées en travaillant avec eux.

Il existe deux façons d'ajouter des extraits de code React Hooks à votre projet:

1. Command
Lancez VS Code Quick open ( Ctrl + P ), collez ext installez ALDuncanson.react-hooks-snippets et appuyez sur Entrez .
2. Extension Marketplace
Lancer «VS Code Extension Marketplace» ( Ctrl + Shift + X ) et recherchez 'React Hook Snippets'. Ensuite, recherchez l'icône «Alduncanson».

Je recommande le premier extrait. En savoir plus sur les extraits de code ici ou consulter les derniers extraits de code de Hooks ici .

4. Tenir compte des règles des crochets

Efforcez-vous de toujours prendre en considération les deux règles des crochets que nous avons apprises plus tôt lorsque vous travaillez avec React Hooks.

• Appelez uniquement vos crochets au niveau supérieur. N'appelez pas Hooks à l'intérieur de boucles, de conditions ou de fonctions imbriquées.
• Appelez toujours Hooks à partir de composants de la fonction React ou de Hooks personnalisés, n'appelez pas Hooks à partir de fonctions JavaScript normales.

Le plugin ESlint appelé eslint- plugin-react-hooks applique ces deux règles, vous pouvez ajouter ce plugin à votre projet si vous le souhaitez, comme nous l'expliquons ci-dessus dans la section des règles de hooks.

Les meilleures pratiques n'ont pas été entièrement résolues car les hooks sont encore relativement nouveau. L'adoption doit donc être prise avec précaution que l'on prendrait en adoptant dans n'importe quelle technologie précoce. Dans cet esprit, les crochets sont la voie pour l'avenir de React.

Conclusion

J'espère que vous avez apprécié ce didacticiel. Nous avons appris les deux règles les plus importantes de React Hooks et comment penser efficacement en hooks. Nous avons examiné les composants fonctionnels (avec des crochets) et certaines des meilleures pratiques pour écrire des crochets de la bonne manière et efficace. Aussi brèves que soient les règles, il est important d'en faire votre boussole de guidage lors de la rédaction des règles. Si vous êtes enclin à l'oublier, vous pouvez utiliser le plugin ESLint pour l'appliquer.

J'espère que vous prendrez toutes les leçons apprises ici dans votre prochain projet React. Bonne chance!

Ressources

(ks, ra, yk, il)