Acho o useReducer mais complicado, tem desvantagens em utilizar o useState ao invés do useReducer?
Acho o useReducer mais complicado, tem desvantagens em utilizar o useState ao invés do useReducer?
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
setState
, ficando difícil de manter.value
pode causar re-render em massa; com useReducer
, enviar só dispatch
reduz isso.useReducer
você centraliza a lógica no reducer (fácil de testar e logar ações).Quando useState
ainda é a melhor escolha
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:
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!