useReducer

React 🟡 Mid

Definition

Hook alternatif a useState pour gerer un etat complexe avec une logique de type action/reducer, inspire de Redux.

Analogie

Comme un standard telephonique : tu envoies un message (action) et l'operateur (reducer) decide quoi faire.

Exemple de code

const reducer = (state, action) => {
  switch(action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'reset': return { count: 0 };
    default: return state;
  }
};
const [state, dispatch] = useReducer(reducer, { count: 0 });

Cas d'usage

Etats complexes avec plusieurs sous-valeurs interdependantes ou quand la logique de transition est elaboree.

Anti-pattern

Utiliser useReducer pour un simple toggle booleen : useState est plus simple et lisible.
#hooks#interview#state