React Context vs Zustand: Quando usar cada um
Desenvolvedores frequentemente cometem um erro com o estado do React. Eles usam o Context incorretamente e depois culpam o Context por problemas de performance.
O problema geralmente é um único objeto de context grande. Quando um valor nesse objeto muda, todos os componentes que utilizam esse context sofrem re-render. Mesmo que um componente precise de apenas uma pequena parte dos dados, ele ainda reage a cada mudança no objeto.
Se suas notificações atualizam a cada 30 segundos, sua Navbar sofre re-render mesmo que ela só precise do nome do usuário. Isso acaba com a performance.
Você pode corrigir isso sem uma biblioteca. Divida seus contexts com base na frequência com que eles mudam.
Em vez de um único context grande, use vários: • UserContext para dados do usuário • UIContext para o estado da sidebar • NotificationContext para alertas
Agora, sua Navbar só sofre re-render quando os dados do usuário mudam. Essa divisão simples resolve a maioria das reclamações de performance.
Use React Context para valores estáveis: • Temas • Status de autenticação • Configurações de idioma
O Context também funciona bem com Server Components. O Zustand funciona apenas no lado do cliente.
Use Zustand quando precisar de inscrições (subscriptions) seletivas. O Zustand permite que os componentes se inscrevam em fatias (slices) específicas do estado. Se uma parte do seu store mudar, apenas os componentes que observam essa parte específica sofrerão re-render.
Siga esta lógica para novos estados:
Use React Context se: • Os dados forem estáveis (tema, autenticação, localidade). • Você precisar que ele funcione com SSR ou Server Components. • Você quiser evitar o prop drilling dividindo os contexts.
Use Zustand se: • Os dados mudarem com frequência. • Os componentes precisarem observar fatias (slices) específicas do estado. • Sua lógica for complexa.
Espere. Não use nenhum dos dois para dados de API. Se você estiver buscando dados de um servidor, use TanStack Query. Context e Zustand não lidam com cache ou refetching em segundo plano.
Resumo: • Um único objeto de context grande causa re-renders. Divida-o. • Usar Zustand para valores estáveis é exagero. • Usar Context para mudanças frequentes causa lentidão. • Usar Zustand para estado do servidor é a ferramenta errada.