---
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)]
---

import Callout from "@/components/Callout";
import tabs from "./tabs";

Ç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.reactClassComponent />

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.reactUseEffectSyntaxes />

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

<tabs.reactUseEffectMount />

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

<tabs.reactUseEffectUpdate />

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.

<tabs.reactUseEffectUpdateDependency />

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 😏

<tabs.reactUseEffectUnmount />

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 !

Voici un exemple de code qui utilise `useEffect` pour gérer le cycle de vie d'un composant :

<tabs.reactUseEffectExample />

### 🔢 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.

<tabs.reactUseEffectChallenge />

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à 😁
