Les Hooks de React pour débutants ⚛
Tags: react, beginners, french, debutant
Published: 2023-04-03 09:55:38

Cet article présente cinq des Hooks les plus utilisés dans React. Les Hooks sont indispensables pour simplifier votre code et améliorer votre expérience de développement. 

***

💡 <mark> Mais au fait, c'est quoi un Hook ? </mark>

#Les Hooks de React

Un Hook est simplement une fonction qui vous permet d'utiliser des fonctionnalités de React.

💡 <mark>  "Hook", ça veut dire "crochet" en anglais 🪝. </mark>

On peut utiliser les Hooks à l’intérieur de **fonctions composants**. 

Attention, il y a plusieurs règles à respecter avec les Hooks. Il faut les appeler uniquement 

1. **au niveau racine de votre fonction React** (pas de conditionnels, de boucles, ou de fonctions imbriquées)
2. **depuis des fonctions React** (pas depuis une fonction de JavaScript classique)

D'autre part, leurs noms commencent tous par _use_, comme `useState` ou `useEffect` par exemple.

***

##le Hook d'état `useState`
`useState` permet à un composant de se **souvenir d'informations**, comme des données saisies par un utilisateur par exemple.

```javascript
//pour utiliser un hook il faut d'abord l'importer
import { useState } from 'react';

//ensuite, on déclare une variable d'état 
const [state, setState] = useState(valeurInitiale);

//pour updater cette variable, on utilise:
setState(nouvelleValeur)
```

Les variables d'état sont **conservées** et ne disparaissent pas quand la fonction s'achève. C'est une fonctionnalité très pratique pour **conserver et manipuler des données**.

Dans cet exemple, j'ai utilisé `useState` pour stocker la variable `count`. 

```jsx
import React, { useState } from 'react';

const Compteur = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={handleIncrement}>
        Cliquez ici
      </button>
    </div>
  );
}
```
La valeur initiale de `count` est 0.
On utilise la fonction `setCount` pour modifier la valeur de `count`.

***

##le Hook d'effet `useEffect`

`useEffect` gère **les effets** de vos composants.
On peut demander à un composant d'exécuter une action après son rendu et choisir à quel moment cette action doit être exécutée.

```javascript
useEffect(configuration, dépendances?)
```

💡 <mark>Mais comment faire pour empêcher mon effet de se déclencher tout le temps ? </mark>

### Déclenchement conditionnel d'un effet


Revenons à notre exemple.

```jsx
import React, { useState, useEffect } from 'react';

const Compteur = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Vous avez cliqué ${count} fois`;
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={handleIncrement}>
        Cliquez ici
      </button>
    </div>
  );
}
```

Le deuxième argument de useEffect est un tableau de dépendances. Lorsque l'une des dépendances change, **l'effet est réexécuté**. Dans ce cas, l'effet n'est exécuté que lorsque l'état de `count` a changé.

### Déclencher un effet au premier affichage

On peut aussi utiliser `useEffect` pour déclencher un effet seulement au **premier render**. Dans ce cas, il faut laisser les crochets du tableau de dépendances vides.

```javascript
useEffect(() => {
    // écrire le code de démarrage ici
}, []);
```


💡 <mark>Quelle est la différence entre useState et useEffect ? </mark>

- `useState` est utilisé pour s'occuper du `state`, c'est à dire d'éléments qui doivent être mis à jour et **affichés sur la page** selon les interactions de l'utilisateur.
- `useEffect` est utilisé pour s'occuper des "effets" (_side effects_), qui doivent être utilisés après chaque affichage d'un composant.

***

##le Hook de contexte `useContext`

💡 <mark>De quoi parle-t-on quand on dit "_context_" ? </mark>

Selon la documentation de React, "le **Contexte** offre un moyen de faire passer des données à travers l’arborescence du composant sans avoir à passer manuellement les props à chaque niveau." [^1]

Autrement dit, si j'ai des **données globales** que je veux utiliser sans avoir à faire passer de props dans chacun de mes composants, je peux utiliser `useContext`.

```javascript
const valeur = useContext(contexte)
```
Ici, useContext est utilisé pour accéder à l'objet contexte ThemeContext : 
```jsx
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const updateTheme = () => {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme.background, color: theme.foreground }}>
      Ce texte aura les couleurs spécifiées dans ThemeContext.
    </div>
  );
}
```

***

##le Hook de référence `useRef`

`useRef` est utilisé pour stocker des **informations qui ne sont pas affichées**. Contrairement à l'état (_state_), modifier une _ref_ ne render pas le composant.

C'est un Hook très pratique lorsque vous souhaitez qu'un composant se souvienne d'une information, mais que cette information **ne déclenche pas de nouveaux rendus**.

```javascript
const ref = useRef(valeurInitiale)
```

On l'utilise notamment pour stocker et manipuler des *éléments du DOM* . 

Dans l'exemple ci-dessous, il est utilisé pour créer une référence à l'élément `input`. 

```javascript
import React, { useRef } from 'react';

const SimpleForm = () => {
  const inputRef = useRef();

  const handleButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Focus</button>
    </div>
  );
}

```
La méthode focus() [^3] est utilisée pour mettre l'accent sur l'élément input lorsque l'on clique sur le bouton.





***

##le Hook de performance `useMemo`

Si vous souhaitez optimiser la performance de votre application, `useMemo` est le hook idéal.

Celui-ci vous permet de **mémoïzer**[^2] (mettre en cache entre les re-renders) le résultat d'un calcul. 

```javascript
const valeurEnCache = useMemo(calculeValeur, dépendances)
```
Dans cet exemple, le Hook `useMemo` est utilisé pour garder en mémoire le résultat d'un calcul coûteux.Ce dernier n'est réexécuté que si la dépendance des données change.

```jsx
import React, { useMemo } from 'react';

const List = ({ data }) => {
  const expensiveCalculation = useMemo(() => {
    return data.map(item => item * 2);
  }, [data]);

  return (
    <div>
      {expensiveCalculation.map(item => (
        <p>{item}</p>
      ))}
    </div>
  );
}
```

***


Merci d'avoir pris le temps de lire cet article jusqu'au bout. J'espère vous avoir aidé à mieux comprendre les Hooks.

Si vous voulez être au courant de mes prochains articles, suivez moi ici, ou sur [Twitter](https://twitter.com/claire_inada). 

***
**En savoir plus**

[La documentation de React](https://react.dev/)
[10 React Hooks Explained // Plus Build your own from Scratch](https://www.youtube.com/watch?v=TNhaISOUy6Q&ab_channel=Fireship)
[5 Custom React Hooks You Need In Every Project](https://www.youtube.com/watch?v=0c6znExIqRw&ab_channel=WebDevSimplified)

[^1]: [Contexte - React] (https://fr.reactjs.org/docs/context.html#gatsby-focus-wrapper)
[^2]: [Mémoïsation](https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation)
[^3]: [HTMLElement.focus()](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/focus)