Como você escolhe uma abordagem de gerenciamento de estado no React?

Question

Accepted Answer

Combine a ferramenta com o **tipo** de estado, em vez de recorrer automaticamente a um store global. A maioria dos problemas de "estado global" é realmente a ferramenta errada para o trabalho.

## Por que isso importa

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## O insight mais importante: server state ≠ client state

Dados de uma API são um **cache** de dados remotos, não estado que você possui. Colocá-lo no Redux significa que você gerencia manualmente loading, caching, refetching e invalidação — doloroso e propenso a bugs. Uma biblioteca de server-state faz tudo isso:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Diretrizes

- Mantenha o estado tão **local** quanto possível; coloque-o perto de onde é usado.
- Não coloque valores que mudam rapidamente em **Context** (ele re-renderiza todos os consumidores).
- Para estado compartilhado com atualizações frequentes, prefira um store com **selective subscriptions** (Zustand/Jotai) para que os componentes se re-renderizem apenas para o slice que leem.
- Recorra ao Redux Toolkit quando você precisar de seu devtools/middleware/structure em estado compartilhado genuinamente complexo.

A habilidade real é **minimizar e colocar corretamente** o estado — não escolher uma biblioteca.