1
resposta

Dúvida

Acho o useReducer mais complicado, tem desvantagens em utilizar o useState ao invés do useReducer?

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta

Oi, Maurício! Como vai?

O hook useState brilha em estados simples e locais. Já useReducer vale quando o estado fica complexo, quando várias ações alteram o mesmo estado, ou quando você quer previsibilidade e organização (muito comum com Context).

Quando insistir em useState traz desvantagens

  • Lógica de atualização se espalha em vários setState, ficando difícil de manter.
  • Sequência de updates pode gerar bugs sutis (ex.: ordem errada, dependência do valor anterior).
  • Com Context, passar um objeto de estado via value pode causar re-render em massa; com useReducer, enviar só dispatch reduz isso.
  • Testes e logs de mudanças ficam mais pobres; com useReducer você centraliza a lógica no reducer (fácil de testar e logar ações).

Quando useState ainda é a melhor escolha

  • Estado simples, independente, local ao componente.
  • Atualizações eventuais, sem regras de transição.
  • Prototipagem rápida.

Exemplo com useState:


// Carrinho com useState

function Cart() {
  const [items, setItems] = React.useState([]);
  const [total, setTotal] = React.useState(0);

  function addItem(product) {
    setItems(prev => [...prev, product]);
    setTotal(t => t + product.price);
  }

  return <button onClick={() => addItem({ name: "Item", price: 10 })}>
    Add
  </button>;
}

Fácil de entender, mas se o estado crescer, fica confuso.

Com useReducer:


// Carrinho com useReducer

function reducer(state, action) {
  switch (action.type) {
    case "ADD":
      return {
        ...state,
        items: [...state.items, action.product],
        total: state.total + action.product.price
      };
    default:
      return state;
  }
}

function Cart() {
  const [state, dispatch] = React.useReducer(reducer, { items: [], total: 0 });

  return <button onClick={() => dispatch({ type: "ADD", product: { name: "Item", price: 10 } })}>
    Add
  </button>;
}

Com o reducer, toda a lógica fica centralizada e fácil de manter.

Ou seja:

  • Se o estado for simplesuseState.
  • Se houver muitas transições, regras de negócio e ContextuseReducer.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado