Gerenciamento de estado sempre foi o tópico mais controverso no ecossistema React. Nos primórdios, tínhamos apenas o setState e o Redux com seu boilerplate verboso. Hoje, em 2024, temos uma miríade de opções. Como escolher a correta?

O Fim do Redux Global para Tudo?

O Redux não morreu, mas seu uso mudou. Antigamente, colocávamos tudo no Redux: dados do servidor, estado de formulários, estado de modais. Hoje, entendemos que existem diferentes tipos de estado.

  • Server State: Dados que vêm de uma API. Ferramentas como React Query (TanStack Query) ou SWR dominaram esse espaço, lidando com cache, revalidação e loading states automaticamente.
  • Form State: O estado de formulários complexos é melhor gerenciado por bibliotecas locais como React Hook Form.
  • UI State: Estado global de interface (ex: tema dark/light, usuário logado). É aqui que as bibliotecas de estado global brilham.

Zustand: A Nova Estrela

Se você precisa de um estado global simples, o Zustand se tornou o favorito da comunidade. Ele é minúsculo, não requer Provider (wrappers) e tem uma API baseada em hooks extremamente simples.

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
}))

Context API: A Solução Nativa

Para estados globais que mudam pouco (como tema ou idioma), a Context API nativa do React é suficiente. O problema surge quando você tem estados que mudam com frequência, o que pode causar re-renderizações desnecessárias em toda a árvore de componentes se não for usado com cuidado.

Conclusão

A era de "uma biblioteca para governar a todos" acabou. A arquitetura moderna de React tende a separar as responsabilidades: React Query para o servidor e Zustand ou Context para o cliente. Escolher a ferramenta certa para o tipo de estado que você está gerenciando é a chave para uma aplicação performática e fácil de manter.