Hooks

useReducer

Alternativa ao useState para estados complexos com múltiplas transições — padrão Redux local.

Definição

useReducer é um hook que recebe (reducer, initialState) e retorna [state, dispatch]. O reducer é uma função pura (state, action) => newState. Ideal quando o próximo estado depende do anterior, ou quando há múltiplas transições relacionadas.

Problema → Solução

Problema

Múltiplos useState entrelaçados (quando mudar A, resetar B, validar C) ficam confusos e propensos a bugs de sincronização.

Solução

Centralizar a lógica em um reducer puro. As transições ficam explícitas e testáveis. dispatch(action) é mais previsível que múltiplos setState.

Dica de entrevista

Tip

Para estado simples (1-2 valores independentes), useState. Para estado complexo (objeto com múltiplos campos relacionados), useReducer.

Código

function reducer(state, action) {
  switch (action.type) {
    case 'add':    return { ...state, count: state.count + 1 };
    case 'remove': return { ...state, count: state.count - 1 };
    case 'reset':  return { count: 0 };
    default: throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <button onClick={() => dispatch({ type: 'add' })}>+</button>
      <span>{state.count}</span>
    </>
  );
}

Perguntas de entrevista

Q.useReducer vs useState — quando escolher?▾

A.useState: 1-3 valores independentes. useReducer: 4+ valores relacionados, ou quando o próximo state depende complexamente do anterior, ou quando você quer testar a lógica de transição isoladamente.

Q.useReducer + useContext substitui Redux?▾

A.Para apps pequenos/médios, sim. Para apps grandes, Redux Toolkit oferece DevTools, middleware, slices, e melhor performance com seletores. A escolha depende da escala.

Q.Por que reducer deve ser puro?▾

A.Para previsibilidade e testabilidade. Side effects (fetch, localStorage) devem ficar em useEffect ou middleware (no caso de Redux). Reducer puro = mesma input → mesmo output.

Termos relacionados

23/122← →