Gerenciamento de Estado no React

Guia completo de padrões modernos de gerenciamento de estado no React, desde o estado local de componentes até stores globais e sincronização de estado do servidor.

Quando Usar Esta Habilidade

• Configurar o gerenciamento de estado global em um aplicativo React
• Escolher entre Redux Toolkit, Zustand ou Jotai
• Gerenciar estado do servidor com React Query ou SWR
• Implementar atualizações otimistas
• Depurar problemas relacionados ao estado
• Migrar do Redux legado para padrões modernos

Conceitos Principais

1. Categorias de Estado

2. Critérios de Seleção

Small app, simple state → Zustand or Jotai
Large app, complex state → Redux Toolkit
Heavy server interaction → React Query + light client state
Atomic/granular updates → Jotai

Início Rápido

Zustand (Mais Simples)

// store/useStore.ts
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface AppState {
  user: User | null
  theme: 'light' | 'dark'
  setUser: (user: User | null) => void
  toggleTheme: () => void
}

export const useStore = create<AppState>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        theme: 'light',
        setUser: (user) => set({ user }),
        toggleTheme: () => set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light'
        })),
      }),
      { name: 'app-storage' }
    )
  )
)

// Usage in component
function Header() {
  const { user, theme, toggleTheme } = useStore()
  return (
    <header className={theme}>
      {user?.name}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </header>
  )
}

Padrões detalhados e exemplos práticos

A documentação detalhada dos padrões está em references/details.md. Leia este arquivo quando a navegação de nível superior for insuficiente.

Melhores Práticas

O Que Fazer

• Coloque o estado perto de onde é usado - Mantenha o estado o mais próximo possível de onde ele é utilizado
• Use seletores - Evite re-renderizações desnecessárias com assinaturas seletivas
• Normalize dados - Achate estruturas aninhadas para facilitar atualizações
• Tipifique tudo - Cobertura completa com TypeScript evita erros em tempo de execução
• Separe as responsabilidades - Estado do servidor (React Query) vs. estado do cliente (Zustand)

O Que Não Fazer

• Não globalize em excesso - Nem tudo precisa estar no estado global
• Não duplique o estado do servidor - Deixe o React Query gerenciar
• Não modifique diretamente - Sempre use atualizações imutáveis
• Não armazene dados derivados - Calcule-os em vez disso
• Não misture paradigmas - Escolha uma solução principal por categoria

Guias de Migração

Do Redux Legado para RTK

// Before (legacy Redux)
const ADD_TODO = "ADD_TODO";
const addTodo = (text) => ({ type: ADD_TODO, payload: text });
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
}

// After (Redux Toolkit)
const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      // Immer allows "mutations"
      state.push({ text: action.payload, completed: false });
    },
  },
});