Gerenciamento de Estado Client-side: A Morte do Redux e a Ascensão do Zustand

Durante anos, todo projeto React começava com a instalação de um polvo gigante chamado Redux. Havia reducers, actions, dispatchers, thunks e arquivos intermináveis apenas para guardar o estado de um "Carrinho de Compras".

Com a chegada do Next.js App Router (React Server Components), 80% do que chamávamos de "Estado Global" desapareceu. Os dados vêm direto do servidor. Para os 20% restantes que sobrevivem exclusivamente no navegador, a nossa arquitetura bane o Redux e exige o uso do Zustand.

---

1. O Problema da Context API e do Redux

• Redux: É pesado, complexo e exige que toda a sua aplicação seja envelopada por um <Provider>. Para SaaS ágeis, é um tiro de canhão para matar uma mosca.
• Context API Nativa: Resolveria o problema do peso, mas possui um erro arquitetural fatal: toda vez que um valor no Contexto muda, todos os componentes que leem aquele contexto re-renderizam, destruindo a performance.

---

2. A Elegância do Zustand

Zustand (que significa "estado" em alemão) é um gerenciador de estado atômico e leve (apenas ~1KB) que funciona com hooks.

Ele quebra todas as regras burocráticas:

1. Sem Providers: Você não precisa abraçar o seu layout.tsx com <Context>.
2. Re-renders Seletivos: Se o seu componente só precisa ler a quantidade de itens no carrinho, ele só vai renderizar de novo se a quantidade mudar, mesmo que outros dados da mesma Store sejam alterados.

Exemplo Prático

import { create } from 'zustand'

// 1. Definição da Store
interface CartStore {
  itemsCount: number;
  isOpen: boolean;
  openCart: () => void;
  addItem: () => void;
}

// 2. Criação do Hook
export const useCartStore = create<CartStore>((set) => ({
  itemsCount: 0,
  isOpen: false,
  openCart: () => set({ isOpen: true }),
  addItem: () => set((state) => ({ itemsCount: state.itemsCount + 1 })),
}));

Para usar em qualquer componente do sistema:

'use client'
import { useCartStore } from '@/store/cart'

export function CartBadge() {
  // O componente SÓ re-renderiza quando itemsCount mudar!
  const itemsCount = useCartStore((state) => state.itemsCount);
  
  return <div className="badge">{itemsCount}</div>
}

---

3. A Regra de Ouro do Estado

Antes de criar uma Store no Zustand, o desenvolvedor deve se perguntar: "Esse dado precisa mesmo existir no cliente?"

• Lista de clientes do banco de dados? ❌ Não. Isso é responsabilidade do Next.js (fetch cacheado) no Server Component.
• Se o menu lateral (Sidebar) está aberto ou fechado? ✅ Sim. Isso é UI State perfeitamente alinhado para o Zustand.

[!WARNING] Mantenha suas Stores atômicas. Em vez de criar um único useGlobalStore gigantesco, crie múltiplos hooks pequenos (ex: useAuthStore, useUiStore, useCartStore). Isso facilita os testes e evita confusão mental em equipes grandes.

---

Precisa de apoio técnico para a sua empresa?

Se a sua operação busca especialistas para modernização de sistemas legados ou desenvolvimento de sistemas sob medida com arquitetura de alta performance (Next.js e Supabase), conheça meus serviços de tecnologia ou fale diretamente comigo pelo WhatsApp.