Passer au contenu principal

Comprendre et utiliser le Hook useReducer en React

Le hook useReducer de React constitue une alternative puissante à useState pour la gestion d’états complexes.

Lorsqu’un composant commence à accumuler plusieurs appels à useState, cela indique souvent qu’il est temps de centraliser la logique d’état avec useReducer.

Qu’est-ce que useReducer ?

useReducer est un hook React conçu pour structurer et clarifier la gestion de l’état.

Plutôt que de multiplier les fonctions setState, il vous permet de définir une seule fonction de mise à jour, appelée reducer, qui détermine comment l’état doit évoluer en réponse à des actions explicites.

Cette approche rend votre code plus prévisible, testable et facile à maintenir, en particulier dans les applications React de taille moyenne à grande.

Syntaxe de useReducer

const [state, dispatch] = useReducer(reducer, initialState);

  • state : représente la valeur actuelle de votre état.

  • dispatch : une fonction qui envoie une action décrivant ce qui s’est produit.

  • reducer : une fonction qui détermine le nouvel état en fonction de l’état actuel et de l’action.

Exemple d’utilisation de useReducer

Imaginons une application de todo list. Nous voulons pouvoir désactiver une todo en cliquant sur un bouton.

Nous commençons par définir notre reducer :

function reducer(state, action) {
  switch (action.type) {
    case 'DISABLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id !== action.payload.id
            ? todo
            : { ...todo, enabled: false }
        ),
      };
    case '...';
      // do something ...
    default:
      return state;
  }
}

Puis initialiser le hook :

const initialState = {
  todos: [
    { id: 1, text: 'Apprendre React', enabled: true },
    { id: 2, text: 'Lire la doc de useReducer', enabled: true },
  ],
};

const [state, dispatch] = useReducer(reducer, initialState);

Enfin, déclencher une action :

<button onClick={() => dispatch({ type: 'DISABLE_TODO', payload: todo })}>
  Désactiver
</button>

Dans cet exemple :

  1. Le clic sur le bouton envoie une action au reducer.
  2. Le reducer retourne un nouvel état avec la todo désactivée.
  3. React déclenche un nouveau rendu grâce à la détection de changement d’état.

Les bonnes pratiques de useReducer

1. Ne mutez jamais l’état directement

React se base sur la comparaison d’objets pour détecter les changements. Toujours retourner un nouvel objet plutôt que de modifier l’état existant.

  • ❌ Mauvais : state.todos = newTodos;
  • ✅ Correct : return { ...state, todos: newTodos };

2. dispatch est une référence stable

La fonction dispatch ne change jamais entre les rendus. Il est donc inutile de la placer par exemple dans les dépendances de vos useEffect.

Retour en haut