Qual a diferença entre Context API e Redux no gerenciamento de estado?

Context API e Redux resolvem o mesmo problema superficialmente — compartilhar estado entre componentes sem prop drilling — mas têm filosofias, capacidades e casos de uso bem diferentes.

Context API

É nativa do React. Permite passar dados pela árvore de componentes sem precisar passar props manualmente em cada nível.

const ThemeContext = createContext()

function App() {
  const [theme, setTheme] = useState('dark')
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Page />
    </ThemeContext.Provider>
  )
}

function Button() {
  const { theme } = useContext(ThemeContext)
  return <button className={theme}>Clique</button>
}

Limitações do Context:

• Todo componente que consome um contexto re-renderiza quando qualquer valor do provider muda — mesmo que aquele componente não use o valor alterado
• Não tem ferramentas de debug nativas
• Sem padrão para lidar com lógica assíncrona (fetches, side effects)
• Difícil de escalar quando o estado é grande e frequentemente atualizado

Redux

É uma biblioteca externa baseada em três princípios: store única, estado imutável, e mudanças apenas via actions + reducers.

// action
dispatch({ type: 'INCREMENT' })

// reducer
function counter(state = 0, action) {
  if (action.type === 'INCREMENT') return state + 1
  return state
}

Vantagens do Redux:

• Re-renders otimizados — componentes re-renderizam só quando o slice de estado que consomem muda
• Redux DevTools — viagem no tempo, replay de actions, inspeção do estado
• Middleware para async (Redux Thunk, Redux Saga)
• Previsível e testável por design
• Escalável para apps grandes com estado complexo

Comparação direta

	Context API	Redux
Origem	Nativa do React	Biblioteca externa
Boilerplate	Mínimo	Médio (menor com Redux Toolkit)
Performance	Re-renders excessivos em estados dinâmicos	Otimizado com seletores
DevTools	Não tem	Redux DevTools excelente
Async	Manual (useEffect)	Middleware nativo (Thunk/Saga)
Curva de aprendizado	Baixa	Média
Ideal para	Estado estático/pouco alterado	Estado global complexo e dinâmico

Quando usar cada um:

Use Context API para:

• Tema (dark/light mode)
• Idioma / internacionalização
• Dados do usuário autenticado
• Qualquer estado que muda raramente

Use Redux (ou Redux Toolkit) para:

• Estado que muda com frequência e é consumido por muitos componentes
• Lógica de negócio complexa
• Necessidade de debugging avançado
• Apps de médio a grande porte

Alternativas modernas

Zustand e Jotai surgiram como meio-termo: API simples como Context, performance e DevTools próximos do Redux.