Avançado FE

Gerenciamento de Estado Global

Context vs Zustand vs Redux Toolkit vs Jotai. Quando cada um e os trade-offs.

Definição

Nem todo estado precisa ser global. Estado de UI (modal aberto, tab ativa) fica local com useState. Estado compartilhado entre componentes próximos: elevar state. Estado de servidor (dados da API): React Query/SWR — não useState. Apenas estado verdadeiramente global de cliente (tema, preferências, carrinho offline) justifica lib de estado global.

Problema → Solução

Problema

Context API para estado que muda frequentemente (todos os consumers re-renderizam). Redux boilerplate excessivo. useState com prop drilling profundo. Estado de servidor (lista de produtos) em useState em vez de React Query.

Solução

Zustand: 80% dos casos — simples, performático, sem boilerplate. Redux Toolkit: devtools avançados, ecossistema maduro, teams grandes. Jotai: estado atômico para UI muito granular. Context API: dados que mudam raramente (tema, idioma, user logado).

Dica de entrevista

Tip

A maioria dos apps não precisa de estado global. Antes de adicionar Zustand: (1) elevar estado, (2) composição de componentes, (3) React Query para estado de servidor. Se ainda precisar, Zustand é a escolha padrão em 2025.

Código

// Zustand — store simples e performático
import { create } from 'zustand'

const useCartStore = create((set, get) => ({
  items: [],

  addItem: (item) => set(state => ({
    items: [...state.items, item]
  })),

  removeItem: (id) => set(state => ({
    items: state.items.filter(i => i.id !== id)
  })),

  get total() {
    return get().items.reduce((s, i) => s + i.price, 0)
  },
}))

// Usar com seletor — só re-renderiza se items mudar
const items = useCartStore(state => state.items)
const addItem = useCartStore(state => state.addItem)

// Context API: apenas para dados raramente atualizados
const ThemeContext = createContext('light')
// ✅ tema — muda raramente
// ❌ lista de produtos — use React Query

Perguntas de entrevista

Q.Por que Context API tem problema de performance?▾

A.Todo consumer do Context re-renderiza quando qualquer valor do context muda, mesmo que não use o valor que mudou. Solução: dividir contexts por frequência de atualização. Para estado frequente, Zustand é sempre melhor.

Q.Zustand vs Redux Toolkit em 2025?▾

A.Zustand: 1kb, zero boilerplate, API simples. Redux Toolkit: ecossistema maduro, RTK Query integrado, devtools excelentes. A tendência é Zustand + React Query substituir Redux na maioria dos novos projetos.

Q.O que é estado derivado e por que não guardá-lo?▾

A.Estado derivado é calculado a partir de outro estado: fullName = firstName + lastName. Guardar ambos cria problema de sincronização. Calcular no render (ou useMemo) garante que nunca ficam dessincronizados.

Termos relacionados

59/122← →