When should you use useReducer instead of useState? Explain with a concrete example.

Question

Accepted Answer

useReducer is an alternative to useState for managing complex state. It is particularly useful when the state has multiple sub-values or when the next value depends on the previous one. Use useState for simple, independent pieces of state. const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [isLoading, setIsLoading] = useState(false); Use useReducer when the state is complex with multiple related values, when state transitions follow specific logic, or when you want to centralize update logic. Here is an example with a complex form. const initialState = { values: { name: '', email: '', password: '' }, errors: {}, isSubmitting: false, isValid: false }; function formReducer(state, action) { switch (action.type) { case 'SET_FIELD': return { ...state, values: { ...state.values, [action.field]: action.value }, errors: { ...state.errors, [action.field]: null } }; case 'SET_ERROR': return { ...state, errors: { ...state.errors, [action.field]: action.error } }; case 'SUBMIT_START': return { ...state, isSubmitting: true }; case 'SUBMIT_SUCCESS': return { ...state, isSubmitting: false, values: initialState.values }; case 'SUBMIT_ERROR': return { ...state, isSubmitting: false, errors: action.errors }; default: return state; } } function RegistrationForm() { const [state, dispatch] = useReducer(formReducer, initialState); const handleChange = (field) => (e) => { dispatch({ type: 'SET_FIELD', field, value: e.target.value }); }; const handleSubmit = async () => { dispatch({ type: 'SUBMIT_START' }); try { await submitForm(state.values); dispatch({ type: 'SUBMIT_SUCCESS' }); } catch (errors) { dispatch({ type: 'SUBMIT_ERROR', errors }); } }; return ( ); } The advantages of useReducer are that logic is centralized and testable separately, state transitions are explicit and predictable, it is easier to debug because you can log each action, and the pattern is familiar if you know Redux. A simple rule is that if you have more than three related useState calls, or if updates to one state depend on another, consider useReducer.