Le hook useReducer de React : syntaxe, exemples, vs useState

useReducer est un hook React qui garde l'état comme useState, mais regroupe toutes les façons de le modifier dans une seule fonction, le reducer. Votre composant appelle dispatch avec un objet action comme { type: 'increment' }, et React passe l'état actuel et cette action au reducer, qui renvoie l'état suivant.

import { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error('Unknown action: ' + action.type);
    }
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p style={{ fontSize: 24 }}>{state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+1</button>{' '}
            <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>{' '}
            <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
        </div>
    );
}

Les boutons ne disent pas comment le compteur change, seulement ce qui s'est passé. Tout le calcul vit dans reducer. Ajoutez un case 'double' qui renvoie { count: state.count * 2 } et un bouton qui l'envoie pour voir comment s'intègre un nouveau type de mise à jour.

La syntaxe

const [state, dispatch] = useReducer(reducer, initialArg, init); // init is optional

function reducer(state, action) {
    // return the next state
}

• reducer est une fonction (state, action) => nextState. Définissez-la hors du composant ; elle n'a besoin de rien dans la portée du composant.
• initialArg est l'état de départ, utilisé au premier rendu seulement.
• init est facultatif. Si vous le passez, l'état de départ est init(initialArg) à la place.
• state est l'état actuel pour ce rendu.
• dispatch(action) envoie une action au reducer et planifie un rendu avec le résultat. Il est stable : c'est la même fonction à chaque rendu, vous pouvez donc la passer vers le bas ou la lister comme dépendance sans risque.

Une action peut être n'importe quelle valeur, mais par convention c'est un objet avec une chaîne type qui décrit ce qui s'est passé, plus les données dont le reducer a besoin : { type: 'added', text: 'Buy milk' }.

Écrire un reducer

La plupart des reducers sont un switch sur action.type, avec un case par type d'événement. Chaque case renvoie un état entièrement nouveau ; il ne modifie jamais l'ancien. Le case default lève une erreur, pour qu'une faute de frappe comme dispatch({ type: 'incremnet' }) échoue bruyamment au lieu de ne rien faire.

Nommez les actions d'après ce que l'utilisateur a fait (added, toggled, deleted), pas d'après le changement d'état que vous avez en tête (setTodos). Le composant se lit alors comme une liste d'événements, et le reducer est le seul endroit qui décide de ce que signifie chaque événement.

Les reducers doivent être purs

Un reducer est une fonction pure : pour le même état et la même action, il renvoie le même résultat, et ne fait rien d'autre. Donc pas de mutation, pas de requêtes, pas de minuteurs, pas de Math.random() ni de Date.now() à l'intérieur. React s'appuie sur cela. En développement sous StrictMode, React appelle votre reducer deux fois pour chaque action et garde un seul résultat, pour vous aider à repérer un reducer qui n'est pas pur. L'aperçu fonctionne ici comme un build de production, les exemples de cette page l'appellent donc une seule fois.

La règle sur la mutation est celle qu'on enfreint le plus. Pousser dans state.todos et renvoyer state renvoie le même objet, donc React ne voit aucun changement et saute le rendu, le même piège que celui décrit dans mettre à jour tableaux et objets. Construisez de nouveaux tableaux et objets avec le spread, map et filter.

// Wrong: mutates and returns the same object
case 'added':
    state.todos.push(action.todo);
    return state;

// Right: returns a new object with a new array
case 'added':
    return { ...state, todos: [...state.todos, action.todo] };

Les effets de bord qui appartiennent à un événement, comme une sauvegarde sur un serveur, vont dans le gestionnaire d'événement à côté de dispatch. Les effets de bord qui appartiennent à l'état, comme sa synchronisation avec localStorage, vont dans un effet.

Une liste de tâches avec useReducer

Voici le reducer qui fait un vrai travail : ajouter, cocher et supprimer des tâches. Le console.log en haut du reducer affiche chaque action, un moyen pratique de suivre l'évolution de l'état pendant le débogage. C'est le seul effet de bord couramment toléré dans un reducer, car il ne modifie rien ; retirez-le avant la mise en production.

import { useReducer, useState } from 'react';

let nextId = 3;

function todosReducer(todos, action) {
    console.log('action', action.type, action);
    switch (action.type) {
        case 'added':
            return [...todos, { id: action.id, text: action.text, done: false }];
        case 'toggled':
            return todos.map((t) => (t.id === action.id ? { ...t, done: !t.done } : t));
        case 'deleted':
            return todos.filter((t) => t.id !== action.id);
        default:
            throw new Error('Unknown action: ' + action.type);
    }
}

export default function App() {
    const [todos, dispatch] = useReducer(todosReducer, [
        { id: 1, text: 'Read the docs', done: true },
        { id: 2, text: 'Write a reducer', done: false },
    ]);
    const [text, setText] = useState('Ship it');

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} />
            <button onClick={() => { dispatch({ type: 'added', id: nextId++, text }); setText(''); }}>Add</button>
            <ul>
                {todos.map((t) => (
                    <li key={t.id}>
                        <label>
                            <input
                                type="checkbox"
                                checked={t.done}
                                onChange={() => dispatch({ type: 'toggled', id: t.id })}
                            />
                            {t.text}
                        </label>{' '}
                        <button onClick={() => dispatch({ type: 'deleted', id: t.id })}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Ajoutez une tâche, cochez une case et supprimez-en une, puis lisez la console : chaque changement est une ligne qui nomme l'action et ses données. Le texte du champ reste dans useState, car il est local au champ et aucun autre événement n'y touche. Combiner les deux hooks dans un composant est normal.

L'identifiant de la nouvelle tâche est créé dans le gestionnaire de clic et voyage dans l'action, le reducer ne fait donc que le copier. Écrire id: nextId++ dans le reducer le rendrait impur : sous StrictMode en développement, le second appel sauterait un identifiant.

dispatch ne change pas l'état tout de suite

dispatch fonctionne comme un setter de useState : il planifie un rendu, et la variable state de votre gestionnaire actuel garde l'ancienne valeur. Pour utiliser le nouvel état tout de suite, calculez-le vous-même en appelant le reducer.

import { useReducer } from 'react';

function reducer(state, action) {
    if (action.type === 'add') return { total: state.total + action.amount };
    throw new Error('Unknown action: ' + action.type);
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, { total: 0 });

    function addTen() {
        const action = { type: 'add', amount: 10 };
        dispatch(action);
        console.log('state.total after dispatch:', state.total);
        console.log('what the next render will see:', reducer(state, action).total);
    }

    return <button onClick={addTen}>Add 10 (total {state.total})</button>;
}

Cliquez plusieurs fois. La première ligne affichée a toujours un pas de retard, et la seconde correspond au nombre sur le bouton après le rendu. Comme le reducer est une simple fonction, l'appeler vous-même est sans risque, un autre avantage de le garder pur.

useState ou useReducer

Les deux hooks stockent de l'état, et tout ce que vous écrivez avec l'un peut s'écrire avec l'autre. La différence tient à l'endroit où vit la logique de mise à jour.

Passez à useReducer quand vous remarquez que le même état est mis à jour dans de nombreux gestionnaires, quand un événement doit modifier plusieurs éléments d'état qui doivent rester cohérents, ou quand un gestionnaire contient surtout de la logique sur l'état suivant. Pour un interrupteur ou un champ texte, useState est plus court et plus clair. Changer plus tard n'est pas difficile : remplacez les setters par des dispatches et déplacez la logique dans des cases.

Initialisation paresseuse

Si vous écrivez l'état initial comme un appel de fonction, par exemple useReducer(reducer, createInitialState('Ada')), cet appel s'exécute à chaque rendu, même si React n'utilise son résultat que la première fois. Si construire l'état initial coûte cher, ou doit être dérivé d'une prop, passez un troisième argument : une fonction init. React appelle init(initialArg) une seule fois, au premier rendu.

import { useReducer, useState } from 'react';

function createInitialState(username) {
    console.log('createInitialState runs for', username);
    const todos = [];
    for (let i = 1; i <= 3; i++) {
        todos.push({ id: i, text: `${username}'s task ${i}` });
    }
    return { todos };
}

function reducer(state, action) {
    if (action.type === 'cleared') return { todos: [] };
    throw new Error('Unknown action: ' + action.type);
}

export default function App() {
    const [state, dispatch] = useReducer(reducer, 'Ada', createInitialState);
    const [note, setNote] = useState('');

    return (
        <div>
            <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Type to re-render" />
            <ul>
                {state.todos.map((t) => <li key={t.id}>{t.text}</li>)}
            </ul>
            <button onClick={() => dispatch({ type: 'cleared' })}>Clear</button>
        </div>
    );
}

Tapez dans le champ : le composant refait un rendu à chaque frappe, mais createInitialState n'affiche qu'une seule fois. Remplacez maintenant l'appel par useReducer(reducer, createInitialState('Ada')) et tapez à nouveau. La fonction s'exécute à chaque rendu, et React jette le résultat à chaque fois après le premier.

Passez la fonction elle-même, pas le résultat de son appel. useReducer(reducer, 'Ada', createInitialState) est paresseux ; useReducer(reducer, createInitialState('Ada')) ne l'est pas.

useReducer avec le contexte

Un reducer s'associe bien au contexte quand un arbre profond a besoin de l'état. Placez l'état et dispatch dans un contexte en haut de l'arbre, et n'importe quel composant en dessous peut lire l'état ou envoyer des actions sans props transmises à travers chaque couche. Comme dispatch ne change jamais, les composants qui ne font qu'envoyer des actions peuvent lire un contexte séparé pour dispatch et éviter un nouveau rendu quand l'état change.

import { createContext, useContext, useReducer } from 'react';

const TodosContext = createContext(null);
const TodosDispatchContext = createContext(null);

export function TodosProvider({ children }) {
    const [todos, dispatch] = useReducer(todosReducer, []);
    return (
        <TodosContext value={todos}>
            <TodosDispatchContext value={dispatch}>{children}</TodosDispatchContext>
        </TodosContext>
    );
}

function AddTodo() {
    const dispatch = useContext(TodosDispatchContext);
    return <button onClick={() => dispatch({ type: 'added', text: 'New' })}>Add</button>;
}

Dans React 19, un objet contexte sert de provider à lui seul (<TodosContext value={...}>) ; <TodosContext.Provider> fonctionne toujours aussi. La page sur useContext explique comment le contexte atteint les composants et quand il leur fait refaire un rendu.