Les crochets (Hooks) en un

coup d'œil
Les crochets sont un nouvel ajout dans React 16.8. Ils vous
permettent d'utiliser l'état et d'autres fonctionnalités de React
sans écrire de classe.
Les crochets sont rétrocompatibles . Cette page fournit un aperçu des crochets pour les
utilisateurs expérimentés de React. Il s'agit d'un aperçu rapide. Si vous êtes confus,
recherchez une boîte jaune comme celle-ci :
Explication détaillée
Lisez la Motivation pour savoir pourquoi nous introduisons Hooks to React.
↑↑↑ Chaque section se termine par une case jaune comme celle-ci. Ils renvoient à des
explications détaillées.

📌 le Crochet d’état
Cet exemple affiche un compteur. Lorsque vous cliquez sur le bouton, il incrémente la
valeur :
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Voici useStateun crochet (nous parlerons de ce que cela signifie dans un instant). Nous
l'appelons à l'intérieur d'un composant de fonction pour lui ajouter un état local. React
préservera cet état entre les rendus. useStaterenvoie une paire : la valeur de l'état actuel et
une fonction qui vous permet de la mettre à jour. Vous pouvez appeler cette fonction à
partir d'un gestionnaire d'événements ou ailleurs. C'est similaire à this.setStatedans une
classe, sauf qu'il ne fusionne pas l'ancien et le nouvel état ensemble. (Nous montrerons un
exemple comparant useStateà this.statedans Utilisation du crochet d'état .)
Le seul argument à useStateest l'état initial. Dans l'exemple ci-dessus, c'est 0parce que
notre compteur part de zéro. Notez que contrairement à this.state, l'état ici n'a pas
besoin d'être un objet — bien qu'il puisse l'être si vous le souhaitez. L'argument d'état
initial n'est utilisé que lors du premier rendu.
Déclaration de plusieurs variables d'état
Vous pouvez utiliser le State Hook plus d'une fois dans un même composant :
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}

La syntaxe de déstructuration de tableau nous permet de donner des noms différents aux
variables d'état que nous avons déclarées en appelant useState. Ces noms ne font pas
partie de l' useStateAPI. Au lieu de cela, React suppose que si vous
appelez useStateplusieurs fois, vous le faites dans le même ordre à chaque rendu. Nous
reviendrons sur pourquoi cela fonctionne et quand cela est utile plus tard.
Mais qu'est-ce qu'un Crochet ?
Les hooks sont des fonctions qui vous permettent de « vous connecter » à l'état React et
aux fonctionnalités de cycle de vie des composants fonctionnels. Les crochets ne
fonctionnent pas à l'intérieur des classes - ils vous permettent d'utiliser React sans
classes. (Nous ne recommandons pas de réécrire vos composants existants du jour au
lendemain, mais vous pouvez commencer à utiliser les crochets dans les nouveaux si vous
le souhaitez.)
React fournit quelques Hooks intégrés comme useState. Vous pouvez également créer vos
propres crochets pour réutiliser le comportement avec état entre différents
composants. Nous allons d'abord examiner les crochets intégrés.
Explication détaillée
Vous pouvez en savoir plus sur le State Hook sur une page dédiée : Utilisation du State
Hook .

⚡️ Le Crochet d'effet
Vous avez probablement déjà effectué une récupération de données, des abonnements ou
modifié manuellement le DOM à partir de composants React. Nous appelons ces
opérations « effets secondaires » (ou « effets » en abrégé) car elles peuvent affecter
d'autres composants et ne peuvent pas être effectuées pendant le rendu.
Le crochet d'effet, useEffect, ajoute la possibilité d'effectuer des effets secondaires à partir
d'un composant de fonction. Il a le même objectif
que componentDidMount, componentDidUpdateet componentWillUnmountdans les classes
React, mais unifié en une seule API. (Nous montrerons des exemples
comparant useEffectces méthodes dans Utilisation du crochet d'effet .)
Par exemple, ce composant définit le titre du document après que React a mis à jour le
DOM :
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);

// Similar to componentDidMount and componentDidUpdate:

useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Lorsque vous appelez useEffect, vous dites à React d'exécuter votre fonction "effet" après
avoir apporté les modifications au DOM. Les effets sont déclarés à l'intérieur du composant
afin qu'ils aient accès à ses accessoires et à son état. Par défaut, React exécute les effets
après chaque rendu, y compris le premier rendu. (Nous en dirons plus sur la façon dont
cela se compare aux cycles de vie des classes dans Utilisation du crochet d'effet .)
Les effets peuvent également éventuellement spécifier comment « nettoyer » après eux en
renvoyant une fonction. Par exemple, ce composant utilise un effet pour s'abonner au
statut en ligne d'un ami et nettoie en se désabonnant :
import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);

function handleStatusChange(status) {
setIsOnline(status.isOnline);
}

useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id,

handleStatusChange); return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; });
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

Dans cet exemple, React se désabonnerait de notre ChatAPIlors du démontage du

composant, ainsi qu'avant de réexécuter l'effet en raison d'un rendu ultérieur. (Si vous le
souhaitez, il existe un moyen de dire à React de ne pas se
réabonner si props.friend.idnous sommes passés à ChatAPIn'a pas changé.)
Tout comme avec useState, vous pouvez utiliser plusieurs effets dans un composant :
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => { document.title = `You clicked ${count} times`;
});

const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});

function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
// ...

Les crochets vous permettent d'organiser les effets secondaires dans un composant en
fonction des éléments liés (comme l'ajout et la suppression d'un abonnement), plutôt que
de forcer une division basée sur des méthodes de cycle de vie.
Explication détaillée
Vous pouvez en savoir plus useEffectsur une page dédiée : Utiliser le crochet d'effet .

✌️ Règles des crochets

Les crochets sont des fonctions JavaScript, mais ils imposent deux règles supplémentaires :
• N'appelez Hooks qu'au niveau supérieur . N'appelez pas Hooks dans des boucles, des
conditions ou des fonctions imbriquées.
• Appelez uniquement les crochets à partir des composants de la fonction
React . N'appelez pas Hooks à partir de fonctions JavaScript classiques. (Il n'y a qu'un seul
autre endroit valide pour appeler Hooks - vos propres Hooks personnalisés. Nous en
apprendrons plus sur eux dans un instant.)
Nous fournissons un plugin linter pour appliquer ces règles automatiquement. Nous
comprenons que ces règles peuvent sembler restrictives ou déroutantes au premier abord,
mais elles sont essentielles au bon fonctionnement des Hooks.
Explication détaillée
Vous pouvez en savoir plus sur ces règles sur une page dédiée : Règles des Hooks .

💡 Construire vos propres crochets

Parfois, nous voulons réutiliser une logique avec état entre les
composants. Traditionnellement, il existait deux solutions courantes à ce problème : les
composants d'ordre supérieur et les props de rendu . Les crochets personnalisés vous
permettent de le faire, mais sans ajouter plus de composants à votre arbre.
Plus tôt sur cette page, nous avons introduit un FriendStatuscomposant qui appelle les
crochets useStateet useEffectpour s'abonner au statut en ligne d'un ami. Supposons que
nous souhaitions également réutiliser cette logique d'abonnement dans un autre
composant.
Tout d'abord, nous allons extraire cette logique dans un Hook personnalisé
appelé useFriendStatus:
import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {

const [isOnline, setIsOnline] = useState(null);

function handleStatusChange(status) {
setIsOnline(status.isOnline);
}

useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});

return isOnline;
}

Il prend friendIDcomme argument, et retourne si notre ami est en ligne.

Maintenant, nous pouvons l'utiliser à partir des deux composants :
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}

L'état de chaque composant est complètement indépendant. Les crochets sont un moyen
de réutiliser la logique avec état, pas l'état lui-même. En fait, chaque appel à un Hook a un
état complètement isolé — vous pouvez donc même utiliser le même Hook personnalisé
deux fois dans un composant.
Les crochets personnalisés sont plus une convention qu'une fonctionnalité. Si le nom d'une
fonction commence par " use" et qu'elle appelle d'autres Hooks, nous disons qu'il s'agit
d'un Hook personnalisé. La useSomethingconvention de dénomination est la façon dont
notre plugin linter est capable de trouver des bogues dans le code à l'aide de Hooks.
Vous pouvez écrire des crochets personnalisés qui couvrent un large éventail de cas
d'utilisation tels que la gestion de formulaires, l'animation, les abonnements déclaratifs, les
minuteries et probablement bien d'autres que nous n'avons pas pris en compte. Nous
sommes ravis de voir quels crochets personnalisés la communauté React proposera.
Explication détaillée
Vous pouvez en savoir plus sur les Hooks personnalisés sur une page dédiée : Construire
vos propres Hooks .

🔌 Autres crochets
Il existe quelques crochets intégrés moins couramment utilisés qui pourraient vous être
utiles. Par exemple, useContextvous permet de vous abonner au contexte React sans
introduire d'imbrication :
function Example() {
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext); // ...
}

Et useReducervous permet de gérer l'état local de composants complexes avec un

réducteur :
function Todos() {
const [todos, dispatch] = useReducer(todosReducer); // ...

Explication détaillée
Vous pouvez en savoir plus sur tous les Hooks intégrés sur une page dédiée : Hooks API
Reference .

Prochaines étapes
Ouf, c'était rapide ! Si certaines choses n'ont pas tout à fait de sens ou si vous souhaitez en
savoir plus en détail, vous pouvez lire les pages suivantes, en commençant par la
documentation de State Hook .
Vous pouvez également consulter la référence de l'API Hooks et la FAQ Hooks .
Enfin, ne manquez pas la page d'introduction qui explique pourquoi nous ajoutons des
crochets et comment nous allons commencer à les utiliser côte à côte avec les classes -
sans réécrire nos applications.