useReducer - Gerenciando estado no React

Um dia desses estava navegando pelo LinkedIn e vi um post com esse título: useReducer é a melhor maneira de lidar com estado mas vocês não estão prontos para essa conversa.

Passado um tempo, pesquisei e quis botar em prática.

Basicamente, quando você tem um estado complexo no seu componente, por exemplo, um formulário de cadastro, o useState começa a te dar dores de cabeça. Vejamos como não fica muito bonito:

  const [brand, setBrand] = useState('');
  const [color, setColor] = useState('');
  const [endPlate, setEndPlate] = useState('');
  const [price, setPrice] = useState('');
  const [model, setModel] = useState('');
  const [year, setYear] = useState('');
  const [version, setVersion] = useState('');

Aí entra o useReducer como uma solução mais semântica e escalável para formular estados complexos, gerenciamento de UI, step forms…

• A lógica de atualização fica centralizada num reducer puro.
• O estado vira um objeto estruturado, e não uma coleção de useStates soltos.
• Fica fácil aplicar técnicas inspiradas em Redux, como action types, payloads, e reset state.