Les hooks React : chaque hook expliqué en exemples

Les hooks React sont des fonctions dont le nom commence par use et qui permettent à un composant fonction d'utiliser les fonctionnalités de React : useState pour mémoriser une valeur, useEffect pour exécuter du code après le rendu, useRef pour garder un nœud DOM, useContext pour lire des données partagées. Vous les appelez en haut de votre composant, et React conserve leurs valeurs d'un rendu à l'autre.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Quatre hooks travaillent ensemble ici. useState stocke le texte, useRef pointe vers le champ pour que le bouton puisse lui donner le focus, useMemo garde la liste filtrée jusqu'à ce que la recherche change, et useEffect écrit dans la console après chaque rendu où la recherche a changé. Tapez an et regardez la console : une ligne par frappe, après la mise à jour de la liste.

Pourquoi les hooks existent

Avant React 16.8, un composant qui avait besoin d'un état ou d'un code de cycle de vie devait être une classe. La logique d'une même fonctionnalité était répartie entre componentDidMount, componentDidUpdate et componentWillUnmount, et la partager entre composants passait par des mixins (qui n'ont jamais fonctionné avec la syntaxe des classes), des higher order components ou des render props, qui enveloppaient tous votre arbre dans des couches supplémentaires.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Avec les hooks, la même fonctionnalité vit au même endroit : l'effet démarre le minuteur et son nettoyage l'arrête.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Masquez l'horloge et la console affiche timer stopped : React a exécuté le nettoyage quand Clock a quitté l'écran. Affichez-la à nouveau et un nouveau minuteur démarre. Les composants classes fonctionnent toujours dans React 19, mais le nouveau code utilise les hooks.

Tous les hooks intégrés

React 19.2 regroupe ses hooks selon ce qu'ils apportent à un composant. Vous utiliserez les deux premiers groupes tous les jours, et les autres quand un problème précis l'exige.

use, useActionState, useOptimistic et useFormStatus sont arrivés avec React 19, et useEffectEvent est devenu stable dans la 19.2. Tous les autres hooks de la liste fonctionnent aussi dans React 18.

L'état provoque des rendus, les refs non

Tous les hooks ne déclenchent pas un rendu. useState et useReducer, si : modifiez leur valeur et React redessine le composant. useRef vous donne un objet dont vous pouvez modifier librement le champ current, et React ne refait jamais de rendu à cause de lui. C'est donc le bon endroit pour un identifiant de minuteur, une valeur précédente ou un compteur que l'écran n'affiche pas.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer contient le panier et useState contient la note ; les deux provoquent un rendu quand ils changent, et l'effet écrit une ligne par rendu. L'effet modifie aussi commits.current, mais ce changement ne provoque jamais de rendu à lui seul, donc la console ne boucle pas. Le compteur est mis à jour dans un effet plutôt que dans le corps du composant, car le corps ne doit rien modifier pendant le rendu.

Les règles des hooks

Chaque hook suit deux règles :

1. Appelez les hooks au niveau supérieur de votre composant, jamais dans une condition, une boucle ou une fonction imbriquée.
2. Appelez les hooks uniquement depuis des composants fonctions ou depuis vos propres hooks personnalisés.

React ne reconnaît pas les hooks par leur nom. Il les reconnaît par l'ordre dans lequel vous les appelez, et il attend que cet ordre soit le même à chaque rendu. Un hook dans un if décalerait tous les hooks suivants. La page sur les règles des hooks montre ce qui casse et comment le corriger. use est la seule exception : il peut être appelé dans une condition.

Votre premier hook personnalisé

Quand deux composants ont besoin de la même logique avec état, déplacez-la dans une fonction dont le nom commence par use. Cette fonction peut appeler n'importe quel autre hook. Chaque composant qui l'appelle obtient son propre état.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Les deux compteurs utilisent le même hook, mais cliquer sur l'un laisse l'autre tranquille : un hook personnalisé partage la logique, pas l'état. Ajoutez une fonction decrement à useCounter et un bouton qui l'appelle, et les deux compteurs en profitent d'un coup. D'autres patterns (useToggle, useDebounce, useLocalStorage) se trouvent sur la page des hooks personnalisés.

Quel hook choisir

• L'écran doit changer quand une valeur change : useState, ou useReducer quand de nombreux événements modifient le même état.
• Vous devez communiquer avec quelque chose d'extérieur à React (un minuteur, un abonnement, une requête) : useEffect.
• Vous avez besoin d'un nœud DOM ou d'une valeur que l'écran n'affiche pas : useRef.
• De nombreux composants profonds dans l'arbre ont besoin de la même valeur : useContext.
• Un rendu est lent à cause d'un calcul ou parce qu'un enfant mémoïsé refait son rendu : useMemo et useCallback. React Compiler peut ajouter cette mémoïsation pour vous, mais l'écrire à la main fonctionne toujours et reste courant.
• La saisie semble lente parce que la mise à jour qui la suit est lourde : useTransition ou useDeferredValue.