Quand utiliseriez-vous useReducer à la place de useState?

Question

Accepted Answer

`useReducer` centralise les transitions d'état dans une seule **fonction reducer pure**, au lieu de disperser plusieurs setters `useState`. C'est la version native de React du pattern Redux. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## Comment ça fonctionne Vous `dispatch` une **action** (un objet simple décrivant un événement). React appelle `reducer(currentState, action)` et utilise l'objet retourné comme le nouvel état. Le reducer est **pur** (pas d'effets secondaires, pas de mutation), ce qui rend la logique prédictible et testable unitairement en isolation. ## Quand le préférer à useState - Le prochain état **dépend de l'état précédent** de manière non-triviale. - Plusieurs valeurs **changent ensemble** (par exemple `count` + `step` + `error`). - La logique de mise à jour est assez complexe pour que vous la répétiez entre plusieurs handlers. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus : `dispatch` a une **identité stable**, donc la passer via context ou à des enfants memoizés ne provoque pas de re-rendus. Pour les valeurs simples et indépendantes, `useState` classique reste plus clair.