Si vous débutez avec React, vous vous demandez peut-être ce que sont les React Hooks et quand les utiliser. React n'a introduit les crochets que dans sa version 16.8, mais ils sont rapidement devenus une fonctionnalité essentielle de la bibliothèque.
Apprenez tout sur les bases de React Hooks et découvrez quelques bonnes pratiques pour les utiliser dans vos applications React.
Que sont les crochets React ?
React Hooks vous permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de code supplémentaire. Les crochets sont un excellent moyen de rendre votre code plus lisible et maintenable.
Il y a un peu différents crochets dans React, mais les plus couramment utilisés sont useState et useEffect. Le crochet useState vous permet d'ajouter un état à vos composants. Ceci est utile pour des choses comme le suivi des entrées d'un utilisateur ou des modifications apportées à un formulaire. Le crochet useEffect vous permet d'exécuter une fonction chaque fois qu'un composant est rendu. Ceci est utile pour des choses comme la récupération de données à partir d'une API ou la configuration d'un abonnement.
Quand devriez-vous utiliser React Hooks ?
Vous devez utiliser React Hooks chaque fois que vous avez besoin d'ajouter des fonctionnalités supplémentaires à un composant. Par exemple, si vous avez besoin de garder une trace de l'entrée d'un utilisateur, vous utiliserez le crochet useState. Si vous avez besoin de récupérer des données à partir d'une API, vous utiliserez le crochet useEffect. Vous pouvez aussi créer des crochets personnalisés pour les appels d'API.
Si vous venez de commencer à utiliser React, vous n'aurez peut-être pas encore besoin d'utiliser Hooks. Mais au fur et à mesure que vous créez des applications plus complexes, vous constaterez que les crochets sont un excellent moyen d'ajouter des fonctionnalités supplémentaires à vos composants.
Meilleures pratiques avec les crochets React
Maintenant que vous savez ce que sont les React Hooks et quand les utiliser, parlons de quelques bonnes pratiques.
1. Appeler uniquement les crochets à partir des fonctions React
Vous ne devez appeler React Hooks qu'à partir des fonctions React. Si vous essayez d'appeler des crochets de réaction à partir d'un composant de classe, vous obtiendrez une erreur.
En effet, vous ne pouvez appeler un React Hook qu'à partir d'une fonction React. Les fonctions React sont des composants que vous déclarez avec un mot-clé de fonction.
Voici un exemple de composant de fonction React :
importer Réagissez, { useState } depuis 'réagir';fonctionApplication() {
constante [count, setCount] = useState(0);
retour (
<div>
<p>{compter}</p>
<bouton onClick={() => setCount (compte + 1)}>
Cliquez sur moi
</button>
</div>
);
}
Et voici un exemple de composant de classe :
importer Réagir, { Composant } depuis 'réagir';classeApplications'étendComposant{
état = {
compte: 0
};
rendre() {
retour (
<div>
<p>{this.state.count}</p>
<bouton onClick={() => this.setState({ count: this.state.count + 1 })}>
Cliquez sur moi
</button>
</div>
);
}
}
Le premier exemple déclare le composant App à l'aide du mot-clé function, tandis que le second utilise le mot-clé class.
2. Utilisez un seul crochet useEffect
Si vous utilisez le hook useEffect, vous ne devez en utiliser qu'un par composant. En effet, useEffect s'exécute chaque fois qu'un composant est rendu.
Si vous avez plusieurs crochets useEffect, ils s'exécuteront tous à chaque rendu d'un composant. Cela peut entraîner un comportement inattendu et des problèmes de performances. Dans l'exemple ci-dessous, les deux useEffects s'exécuteront chaque fois que le composant App sera rendu.
importer Réagir, { useState, useEffect } depuis 'réagir';fonctionApplication() {
constante [count, setCount] = useState(0);useEffet(() => {
console.log('Cela s'exécutera chaque fois que le composant App sera rendu !');
}, []);useEffet(() => {
console.log('Cela s'exécutera également chaque fois que le composant App sera rendu !');
}, []);
retour (
<div>
<p>{compter}</p>
<bouton onClick={() => setCount (compte + 1)}>
Cliquez sur moi
</button>
</div>
);
}
Au lieu d'utiliser plusieurs crochets useEffect, vous pouvez utiliser un seul crochet useEffect et y mettre tout votre code. Dans l'exemple ci-dessous, un seul crochet useEffect s'exécutera chaque fois que le composant App sera rendu.
importer Réagir, { useState, useEffect } depuis 'réagir';fonctionApplication() {
constante [count, setCount] = useState(0);useEffet(() => {
console.log('Cela s'exécutera chaque fois que le composant App sera rendu !');
console.log('Cela s'exécutera également chaque fois que le composant App sera rendu !');
}, []);
retour (
<div>
<p>{compter}</p>
<bouton onClick={() => setCount (compte + 1)}>
Cliquez sur moi
</button>
</div>
);
}
Cela signifie que vous ne pouvez appeler React Hooks qu'à partir du premier exemple. Si vous essayez d'appeler React Hooks à partir du deuxième exemple, vous obtiendrez une erreur.
3. Utiliser des crochets au niveau supérieur
L'une des meilleures pratiques avec React Hooks consiste à les utiliser au niveau supérieur. Vous devez éviter d'utiliser des crochets à l'intérieur de boucles, de conditions ou de fonctions imbriquées. Par exemple, si vous utilisezState dans une boucle for, chaque fois que la boucle s'exécute, React créera une nouvelle variable d'état. Cela peut entraîner un comportement inattendu.
importer Réagissez, { useState } depuis 'réagir';fonctionApplication() {
pour (laisser je = 0; je < 10; je++) {
// Ne fais pas ça !
constante [count, setCount] = useState(0);
}
retour (
<div>
<p>{compter}</p>
<bouton onClick={() => setCount (compte + 1)}>
Cliquez sur moi
</button>
</div>
);
}
Dans l'exemple ci-dessus, le composant App n'affichera que le nombre et le bouton de la dernière itération de la boucle. En effet, React ne met à jour la variable d'état qu'à partir de la dernière itération.
Au lieu d'utiliserState à l'intérieur d'une boucle, vous pouvez déclarer une variable d'état en dehors de la boucle. De cette façon, React ne créera qu'une seule variable d'état et la mettra à jour en conséquence.
importer Réagissez, { useState } depuis 'réagir';fonctionApplication() {
// C'est la bonne façon d'utiliser useState dans une boucle
constante [count, setCount] = useState(0);pour (laisser je = 0; je < 10; je++) {
// ...
}
retour (
<div>
<p>{compter}</p>
<bouton onClick={() => setCount (compte + 1)}>
Cliquez sur moi
</button>
</div>
);
}
4. N'abusez pas des crochets
Les React Hooks sont un outil puissant, mais vous devez éviter d'en abuser. Si vous vous retrouvez à utiliser plusieurs crochets dans chaque composant, vous en abusez peut-être.
Les React Hooks sont particulièrement utiles lorsque vous devez partager l'état entre plusieurs composants. Évitez d'utiliser des crochets inutiles car ils peuvent rendre votre code difficile à lire et ils peuvent affecter les performances s'ils sont utilisés de manière excessive.
Ajouter plus de fonctionnalités à l'aide de React 18 Hooks
Avec la sortie de React 18, de nouveaux crochets sont disponibles. Chaque crochet est spécifique à une certaine fonctionnalité de React. Vous pouvez trouver une liste de tous les crochets disponibles sur le site Web de React. Mais les crochets les plus couramment utilisés sont toujours useState et useEffect.