What is the difference between useState and useReducer in React? When would you choose one over the other?

useState vs useReducer

useState — Simple Independent State

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [step, setStep] = useState(1);
// Great for independent, simple values

useReducer — Complex Interdependent State

const initialState = {
  step: 1,
  personalInfo: { name: '', email: '' },
  address: { country: 'BD', international: false },
  preferences: {},
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return {
        ...state,
        [action.section]: {
          ...state[action.section],
          [action.field]: action.value,
        },
      };
    case 'SET_COUNTRY':
      return {
        ...state,
        address: { ...state.address, country: action.value },
        // Derived state logic centralized here
        preferences: action.value !== 'BD'
          ? { ...state.preferences, needsVisa: true }
          : state.preferences,
      };
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1, errors: {} };
    case 'SET_ERRORS':
      return { ...state, errors: action.errors };
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  return (
    <div>
      <StepIndicator step={state.step} />
      {state.step === 1 && <PersonalStep data={state.personalInfo} dispatch={dispatch} />}
      {state.step === 2 && <AddressStep data={state.address} dispatch={dispatch} />}
      {/* ... */}
    </div>
  );
}

When to Use Which

Criteria	useState	useReducer
State complexity	Primitive or simple object	Complex nested/interdependent
Update logic	Simple setters	Complex business logic
Transitions	Next state easily computed from prev	Multiple sub-values change together
Testability	Hard to test complex logic	Reducer is a pure function → easy to test
Number of states	1-3 related values	4+ related values

Testing the Reducer

import { formReducer } from './formReducer';

test('setting international country enables visa', () => {
  const result = formReducer(
    { address: { country: 'BD' }, preferences: {} },
    { type: 'SET_COUNTRY', value: 'US' }
  );
  expect(result.preferences.needsVisa).toBe(true);
});

Pure functions = no React rendering needed for tests.