Când ai folosi useReducer în loc de useState?

Question

Accepted Answer

`useReducer` centralizează tranzițiile de stare într-o singură **funcție reducer pură**, în loc să împrăștii mulți setteri din `useState`. Este versiunea built-in a React a modelului 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 ; } ``` ## De ce conteaza Tu `dispatch` o **action** (un obiect simplu care descrie un eveniment). React apelează `reducer(currentState, action)` și folosește obiectul returnat ca noua stare. Reducerul este **pur** (fără efecte secundare, fără mutații), ceea ce face ca logica să fie previzibilă și testabilă pe unități în izolare. ## Când să-l preferi în locul useState - Starea următoare **depinde de starea anterioară** în moduri netriviale. - Mai multe valori **se schimbă împreună** (de ex. `count` + `step` + `error`). - Logica de actualizare este suficient de complexă încât ai repeta-o în mai mulți handleri. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` are o **identitate stabilă**, deci trecerea sa prin context sau la copii memoizați nu provoacă re-randări. Pentru valori simple și independente, `useState` simplu este încă mai clar.