Les Hooks de React pour débutants ⚛

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.

---

💡 Mais au fait, c'est quoi un Hook ?

Les Hooks de React

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

💡 "Hook", ça veut dire "crochet" en anglais 🪝.

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.

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

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.

useEffect(configuration, dépendances?)

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

Déclenchement conditionnel d'un effet

Revenons à notre exemple.

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.

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

💡 Quelle est la différence entre useState et useEffect ?

• 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

💡 De quoi parle-t-on quand on dit "context" ?

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." ¹

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.

const valeur = useContext(contexte)

Ici, useContext est utilisé pour accéder à l'objet contexte ThemeContext :

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.

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.

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() ² 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³ (mettre en cache entre les re-renders) le résultat d'un calcul.

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.

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.

---

En savoir plus

La documentation de React
10 React Hooks Explained // Plus Build your own from Scratch
5 Custom React Hooks You Need In Every Project

---

1. Contexte - React ↩

2. HTMLElement.focus() ↩

3. Mémoïsation ↩