Quando useresti useReducer al posto di useState?

Question

Accepted Answer

`useReducer` centralizza le transizioni di stato in un'unica **funzione reducer pura**, invece di disseminare molti setter `useState`. È la versione integrata di React del 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 ; } ``` ## Perché è importante Dispacci un'**action** (un oggetto semplice che descrive un evento). React chiama `reducer(currentState, action)` e utilizza l'oggetto restituito come nuovo stato. Il reducer è **puro** (nessun effetto collaterale, nessuna mutazione), il che rende la logica prevedibile e testabile in isolamento. ## Quando preferirlo a useState - Lo stato successivo **dipende dallo stato precedente** in modi non banali. - Più valori **cambiano insieme** (ad es. `count` + `step` + `error`). - La logica di aggiornamento è abbastanza complessa che la ripeteresti tra i gestori. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` ha un'**identità stabile**, quindi passarla attraverso il context o a children memoizzati non causa un re-rendering. Per valori semplici e indipendenti, il semplice `useState` è ancora più chiaro.