Quand choisir entre useReducer et useState ?

Dans le développement avec React, la gestion de l'état est essentielle, et deux hooks sont souvent utilisés le useState et useReducer.

Bien qu'ils aient des fonctionnalités similaires, il est important de savoir quand utiliser l'un plutôt que l'autre.

useState pour des états simples

Le hook useState est idéal pour gérer des données simples, comme des types primitifs tels que des chaînes de caractères, des nombres ou des booléens.

Si tu as un état peu complexe à gérer, comme l'activation ou la désactivation d'une fonctionnalité, useState est généralement le bon choix.

Exemple de cas simple avec useState

Si tu travailles sur un formulaire basique, tu pourrais avoir quelque chose comme ça :

const [age, setAge] = useState(0);

const [name, setName] = useState('');

Ici, l'état est simple et chaque variable est facile à suivre, ce qui rend useState pratique et efficace.

useReducer pour des états complexes

Dès que l'état devient plus complexe, par exemple si tu dois gérer des objets ou des tableaux useReducer est une meilleure option.

Ce hook est particulièrement utile pour gérer des états où plusieurs actions peuvent modifier différentes parties de l'objet.

Avec useReducer, l'état est mis à jour via une fonction de réduction (reducer) qui décide comment l'état doit changer en fonction de l'action. Cela permet de structurer la gestion des modifications d'état, surtout lorsqu'il y a plusieurs transitions possibles.

Exemple de cas avec useReducer

Imaginons que tu gères un panier d'achats dans ton application :

const initialState = { items: [], total: 0 };

function cartReducer(state, action) {

switch (action.type) {

case 'ADD_ITEM':

return {

...state,

items: [...state.items, action.payload],

total: state.total + action.payload.price,

};

case 'REMOVE_ITEM':

return {

...state,

items: state.items.filter(item => item.id !== action.payload.id),

total: state.total - action.payload.price,

};

default:

return state;

}

}

const [cartState, dispatch] = useReducer(cartReducer, initialState);

Dans ce scénario, tu gères plusieurs actions qui modifient l'état (ajouter ou retirer des articles), et useReducer permet de garder le code organisé et extensible.

Quand choisir l'un ou l'autre ?

Il peut être utile de voir le choix entre useState et useReducer comme une échelle :

• Côté gauche, tu as useState, parfait pour des cas d'utilisation simples et des types primitifs (par exemple, un booléen ou un nombre).
• Côté droit, useReducer est mieux adapté aux objets complexes, avec plusieurs propriétés et actions à gérer.

Il n'y a pas de règle stricte qui te dit exactement quand basculer de l'un à l'autre.

Parfois, même pour un objet avec plusieurs propriétés, useState peut rester simple à utiliser.

D'autres fois, quand il y a beaucoup d'actions à gérer, useReducer permet de structurer la logique de manière plus propre.

Les limites de chaque hook

- Limite de useState : Dès que l'état devient complexe ou que plusieurs variables doivent être mises à jour en même temps, useState peut rendre le code plus difficile à maintenir. Tu pourrais te retrouver avec beaucoup de duplications ou des setState à répétition.

- Limite de useReducer : L'inconvénient principal de useReducer est qu'il demande plus de travail au départ. Tu dois écrire un reducer et gérer les différentes actions, ce qui peut sembler fastidieux.

Mais une fois configuré, il rend la gestion de l'état plus facile et évolutive.

Le bon choix dépend toujours de la complexité de l'état et de ce que tu cherches à accomplir.

L'important est de garder ton code aussi lisible et facile à maintenir que possible.