365 lines
10 KiB
Markdown
365 lines
10 KiB
Markdown
---
|
|
title: Les hooks de React
|
|
description: Découvre les hooks de React, une fonctionnalité qui te permet de gérer le state et le cycle de vie de tes composants fonctionnels.
|
|
tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI)]
|
|
---
|
|
|
|
Ça y est, on rentre dans le vif du sujet avec les **hooks** de React !
|
|
|
|
On en a déjà parlé un peu dans l'article précédent _(notamment avec le hook `useState` pour déclarer un state)_, mais on va maintenant les aborder en détail.
|
|
|
|
## 🎣 Qu'est-ce qu'un hook ?
|
|
|
|
Tu te souviens du charabia dans l'article précédent ?
|
|
|
|
> Un **hook** en React est une fonction qui permet d'exploiter les fonctionnalités de React dans un composant fonctionnel _(fonction)_.
|
|
|
|
Essayons de comprendre cette phrase un peu plus en détail en prenant l'origine des composants React.
|
|
|
|
Historiquement, on utilisait des **classes** pour déclarer des composants React plutôt que des **fonctions**.
|
|
C'était pas mal, mais ça devenait vite compliqué à gérer, notamment pour partager de la logique entre plusieurs composants _(comme le state par exemple)_.
|
|
|
|
Pour te donner un aperçu, voici à quoi ressemblait un composant de classe avec les trois étapes du cycle de vie :
|
|
|
|
{% tabs defaultSelectedTab="jsx" %}
|
|
|
|
{% tab value="jsx" label="JSX" %}
|
|
|
|
```jsx
|
|
import React from "react";
|
|
|
|
class MyComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { count: 0 };
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log("Component mounted");
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
console.log("Component updated");
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log("Component unmounted");
|
|
}
|
|
|
|
render() {
|
|
return <div>{this.state.count}</div>;
|
|
}
|
|
}
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab value="tsx" label="TSX" %}
|
|
|
|
```tsx
|
|
import React from 'react';
|
|
|
|
type MyComponentState = {
|
|
count: number;
|
|
};
|
|
|
|
class MyComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state: MyComponentState = { count: 0 };
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log('Component mounted');
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
console.log('Component updated');
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log('Component unmounted');
|
|
}
|
|
|
|
render() {
|
|
return <div>{this.state.count}</div>;
|
|
}
|
|
}
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% /tabs %}
|
|
|
|
Comme dirait l'un de mes chers confrères jury :
|
|
|
|
> C'est pas téros 😕
|
|
|
|
Mais si tu as bien fait attention, tu as pu remarquer trois méthodes _(on ne prend pas le constructor en compte)_ qui sont appelées à des moments précis du cycle de vie du composant :
|
|
|
|
- `componentDidMount` : appelée après le premier rendu du composant
|
|
- `componentDidUpdate` : appelée après chaque mise à jour du composant
|
|
- `componentWillUnmount` : appelée avant la suppression du composant
|
|
|
|
Seulement, comment on peut faire pour gérer ces étapes avec des composants fonctionnels ?
|
|
Et bien c'est là qu'interviennent les **hooks** !
|
|
|
|
Avant de te montrer **comment** reproduire ces étapes avec des **hooks**, voici les **principaux hooks** de base que tu vas **très souvent** utiliser :
|
|
|
|
- `useState` : pour déclarer un **state**
|
|
- `useEffect` : pour gérer le **cycle de vie** d'un composant _(on en parle juste après !)_
|
|
|
|
Il en existe d'autres bien entendu, mais ces deux-là sont les plus utilisés.
|
|
On reviendra sur les autres hooks "basiques" un peu plus tard 😉
|
|
|
|
## useEffect, ou la machinerie du cycle de vie
|
|
|
|
Ce hook.. il est **tellement** puissant !
|
|
Mais il est surtout très mal compris par les débutants _(et même parfois par les confirmés)_.
|
|
|
|
Il faut dire que Facebook n'a pas aidé en le nommant `useEffect`, surtout que tu vas voir : c'est un couteau suisse ce machin 😅
|
|
|
|
Pour faire court : `useEffect` permet de gérer le cycle de vie d'un composant fonctionnel _(comme `componentDidMount`, `componentDidUpdate` et `componentWillUnmount` pour les composants de classe)_.
|
|
|
|
Oui. Il fait tout. Tout seul.
|
|
Tu comprends pourquoi je dis "couteau suisse" ? 😏
|
|
|
|
Alors sur le papier c'est top, mais maintenant je te laisse t'amuser à comprendre comment ça fonctionne 😇
|
|
|
|
{% tabs defaultSelectedTab="1" %}
|
|
|
|
{% tab value="1" label="Écriture #1" %}
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
}, []);
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab value="2" label="Écriture #2" %}
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
}, [props.uneProp]);
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab value="3" label="Écriture #3" %}
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
});
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% /tabs %}
|
|
|
|
Pas cool, hein ? 😂
|
|
Et bien dans ces exemples, on a trois manières d'écrire un useEffect :
|
|
|
|
1. Le hook est exécuté une seule fois, après le premier rendu du composant
|
|
2. Le hook est exécuté à chaque mise à jour du composant
|
|
3. Le hook est exécuté à chaque mise à jour du composant, mais seulement si la propriété `uneProp` de `props` a changé
|
|
|
|
{% callout type="note" title="`useEffect` et les mises à jour du composant" %}
|
|
|
|
Alors quand je dis "le hook est exécuté à chaque mise à jour du composant", il faut également prendre en compte qu'il est également exécuté après le premier rendu du composant.
|
|
|
|
{% /callout %}
|
|
|
|
Mais alors, comment on fait pour gérer ces étapes avec des composants fonctionnels ?
|
|
Si tu n'as pas vu la différence entre les trois écritures, tu remarqueras que c'est le deuxième argument de useEffect qui fait la différence.
|
|
|
|
Le premier argument lui, est une fonction synchrone _(pas le droit de la rendre asynchrone !)_. On mettra dedans tout ce qu'on veut exécuter lors de l'appel du hook.
|
|
|
|
Le deuxième argument est un tableau de dépendances.
|
|
Selon ce tableau, le hook sera exécuté à des moments différents du cycle de vie du composant.
|
|
|
|
### ⚙️ ComponentDidMount
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
}, []);
|
|
```
|
|
|
|
Le tableau de dépendances est vide, on sous-entend que le hook ne dépend d'aucune variable et sera exécuté une seule fois.
|
|
On peut donc dire que c'est l'équivalent de `componentDidMount` pour les composants de classe.
|
|
|
|
### 🔧 ComponentDidUpdate
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
});
|
|
```
|
|
|
|
Ici, le tableau de dépendances est absent _(et tout va bien, il est optionnel !)_.
|
|
Le hook sera exécuté à chaque mise à jour du composant, ainsi que lors du premier rendu.
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
}, [props.uneProp]);
|
|
```
|
|
|
|
Dans ce cas, le tableau de dépendances contient la propriété `uneProp` de `props`.
|
|
Le hook sera exécuté à chaque mise à jour du composant _(ainsi qu'au montage)_, mais seulement si la propriété `uneProp` a changé.
|
|
|
|
### 🗑️ ComponentWillUnmount
|
|
|
|
Et là, tu te dis : "Mais comment je fais pour gérer le démontage du composant ?".
|
|
Hehehe, c'est là que ça devient intéressant 😏
|
|
|
|
```jsx
|
|
React.useEffect(() => {
|
|
// ...
|
|
return () => {
|
|
// ...
|
|
};
|
|
}, []);
|
|
```
|
|
|
|
Tu as vu ce petit `return` ? Et bien, c'est notre équivalent de `componentWillUnmount` pour les composants de classe !
|
|
|
|
Dans cette fonction de retour, on mettra tout ce qu'on veut exécuter avant la suppression du composant.
|
|
|
|
### 📦 Les dépendances
|
|
|
|
Tu as pu voir que le deuxième argument de `useEffect` est un tableau de dépendances.
|
|
Ce tableau est très important, car il permet de gérer les mises à jour du composant.
|
|
|
|
L'idée ici, c'est **d'optimiser** le rendu du composant en évitant de déclencher des mises à jour inutiles.
|
|
Pour éviter que React se dise "Tiens, il y a eu un changement, je vais re-rendre le composant", on va lui dire "Non, non, il n'y a pas eu de changement sur la prop que je t'ai fourni, tu peux rester tranquille".
|
|
|
|
### 🤓 Exemple concret
|
|
|
|
Allez, mettons un peu ce qu'on voit de voir en pratique !
|
|
|
|
{% tabs defaultSelectedTab="jsx" %}
|
|
|
|
{% tab value="jsx" label="JSX" %}
|
|
|
|
```jsx
|
|
import React from "react";
|
|
|
|
export const Counter = () => {
|
|
const [count, setCount] = React.useState(0);
|
|
|
|
React.useEffect(() => {
|
|
console.log("Component mounted");
|
|
|
|
return () => {
|
|
console.log("Component unmounted");
|
|
};
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
console.log("Component updated");
|
|
});
|
|
|
|
const increment = () => setCount(count + 1);
|
|
|
|
return <button onClick={increment}>{count}</button>;
|
|
};
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab value="tsx" label="TSX" %}
|
|
|
|
```tsx
|
|
import React from "react";
|
|
|
|
export const Counter = () => {
|
|
const [count, setCount] = React.useState<number>(0);
|
|
|
|
React.useEffect(() => {
|
|
console.log("Component mounted");
|
|
|
|
return () => {
|
|
console.log("Component unmounted");
|
|
};
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
console.log("Component updated");
|
|
});
|
|
|
|
const increment = () => setCount(count + 1);
|
|
|
|
return <button onClick={increment}>{count}</button>;
|
|
};
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% /tabs %}
|
|
|
|
### 🔢 On revient sur le cycle de vie !
|
|
|
|
Et... stoooop !
|
|
On revient sur le cycle de vie d'un composant maintenant qu'on a vu `useEffect` en action !
|
|
|
|
Je vais te donner un exemple de code supplémentaire et tu vas devoir deviner l'ordre d'apparition des messages dans la console.
|
|
|
|
```jsx
|
|
import React from "react";
|
|
|
|
export const MyComponent = () => {
|
|
React.useEffect(() => {
|
|
console.log("1");
|
|
});
|
|
|
|
console.log("2");
|
|
|
|
React.useEffect(() => {
|
|
console.log("3");
|
|
}, []);
|
|
|
|
const logInRender = () => {
|
|
console.log("4");
|
|
return null;
|
|
};
|
|
|
|
return <div>{logInRender()}</div>;
|
|
};
|
|
```
|
|
|
|
Voici les possibilités :
|
|
|
|
{% callout type="question" title="Quel est l'ordre d'apparition des messages dans la console ?" %}
|
|
|
|
- **A** - 4, 2, 1, 3
|
|
- **B** - 2, 4, 1, 3
|
|
- **C** - 1, 2, 3, 4
|
|
- **D** - La réponse D
|
|
|
|
{% /callout %}
|
|
|
|
## 🧩 Les autres hooks
|
|
|
|
On a vu les deux hooks les plus utilisés, mais il en existe d'autres qui peuvent être très utiles dans certaines situations.
|
|
|
|
Par exemple, on a :
|
|
|
|
- `useContext` : pour accéder à un contexte
|
|
- `useReducer` : pour gérer un state complexe
|
|
- `useCallback` : pour éviter les re-rendus inutiles
|
|
- `useMemo` : pour éviter les calculs inutiles
|
|
- `useRef` : pour accéder à un élément du DOM
|
|
|
|
Ne t'inquiète pas, on va les voir plus tard car le hook `useEffect` est déjà bien assez complexe à comprendre pour le moment 😅
|
|
|
|
## Conclusion
|
|
|
|
Et voilà, tu as maintenant toutes les clés en main pour gérer le cycle de vie de tes composants fonctionnels avec les hooks de React !
|
|
|
|
Vraiment, même si les autres hooks restent importants _(voire obligatoires dans certains contextes)_, tu as déjà de quoi faire de bons composants avec seulement ces deux là 😁
|