<h2>Introdução ao Gerenciamento de Estado Moderno</h2>
<p>O gerenciamento de estado é um dos desafios centrais em aplicações React modernas. Ao longo dos anos, passamos de Redux—com toda sua verbosidade—para soluções mais minimalistas e intuitivas. Zustand, Jotai e Recoil representam essa evolução, cada uma com filosofias distintas. Neste artigo, exploraremos essas três bibliotecas, seus trade-offs e quando usá-las, para que você possa tomar decisões informadas em seus projetos.</p>
<h2>Zustand: Simplicidade e Minimalismo</h2>
<p>Zustand é uma biblioteca extremamente leve (2.9KB) que oferece uma API simples e direta. Sua filosofia é: "você não precisa de tanto código para gerenciar estado". A biblioteca usa Hooks do React nativamente e funciona sem providers, tornando-a ideal para projetos que valorizam simplicidade.</p>
<h3>Características principais</h3>
<p>Zustand armazena estado em uma store única (embora você possa criar múltiplas) e oferece seletores granulares para evitar re-renders desnecessários. O padrão é usar <code>create</code> para definir sua store:</p>
<pre><code class="language-javascript">import create from 'zustand';
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));
// Uso em componente
function Counter() {
const count = useCounterStore((state) => state.count);
const increment = useCounterStore((state) => state.increment);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+1</button>
</div>
);
}</code></pre>
<p>O grande diferencial é a ausência de boilerplate. Você não precisa de reducers, actions ou dispatches—apenas uma função que retorna seu estado e seus métodos. Para estado mais complexo, Zustand ainda mantém a elegância:</p>
<pre><code class="language-javascript">const useAppStore = create((set) => ({
user: null,
todos: [],
setUser: (user) => set({ user }),
addTodo: (todo) => set((state) => ({
todos: [...state.todos, todo],
})),
loading: false,
setLoading: (bool) => set({ loading: bool }),
}));</code></pre>
<h2>Jotai: Abordagem Atômica e Composável</h2>
<p>Jotai (que significa "estado" em japonês) traz uma perspectiva diferente: em vez de uma store centralizada, você trabalha com átomos—unidades isoladas de estado. Isso permite composição granular e é especialmente poderoso em aplicações complexas onde diferentes partes precisam de estados independentes mas relacionados.</p>
<h3>Arquitetura e uso</h3>
<p>Jotai separa lógica de estado da lógica de componentes através de átomos primitivos:</p>
<pre><code class="language-javascript">import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
const countAtom = atom(0);
const nameAtom = atom('John');
// Átomos derivados (computed atoms)
const greetingAtom = atom((get) => {
const count = get(countAtom);
const name = get(nameAtom);
return Hello ${name}, you have ${count} items;
});
function Component() {
const [count, setCount] = useAtom(countAtom);
const greeting = useAtomValue(greetingAtom);
const setName = useSetAtom(nameAtom);
return (
<div>
<p>{greeting}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setName('Alice')}>Change Name</button>
</div>
);
}</code></pre>
<p>A vantagem aqui é a reatividade natural: átomos derivados atualizam automaticamente quando suas dependências mudam. Jotai também suporta async atoms nativamente, ideal para requisições de API:</p>
<pre><code class="language-javascript">const userAtom = atom(
async (get) => {
const response = await fetch('/api/user');
return response.json();
}
);
function UserProfile() {
const user = useAtomValue(userAtom);
if (!user) return <p>Loading...</p>;
return <p>User: {user.name}</p>;
}</code></pre>
<h2>Recoil: Reatividade Profunda e DevTools</h2>
<p>Recoil, desenvolvido pelo Facebook, é a solução mais sofisticada das três. Oferece um sistema reativo completo com selectors, efeitos colaterais (effects) e ferramentas avançadas de debug. É ideal quando você precisa de estado altamente reativo com dependências complexas.</p>
<h3>Estrutura e padrões</h3>
<p>Recoil funciona com átomos e selectors, mas adiciona camadas de funcionalidade como efeitos e validação:</p>
<pre><code class="language-javascript">import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';
const userIdAtom = atom({
key: 'userId',
default: null,
});
const userSelector = selector({
key: 'user',
get: async ({ get }) => {
const userId = get(userIdAtom);
if (!userId) return null;
const response = await fetch(/api/users/${userId});
return response.json();
},
});
function UserDetail() {
const userId = useRecoilState(userIdAtom);
const user = useRecoilValue(userSelector);
return <div>{user?.name}</div>;
}</code></pre>
<p>Recoil também permite effects para sincronização com localStorage ou APIs:</p>
<pre><code class="language-javascript">const persistedCountAtom = atom({
key: 'persistedCount',
default: 0,
effects: [
({ setSelf, onSet }) => {
// Carregar do localStorage ao inicializar
setSelf(localStorage.getItem('count') ?? 0);
// Salvar quando mudar
onSet((newValue) => {
localStorage.setItem('count', newValue);
});
},
],
});</code></pre>
<h2>Comparação Prática</h2>
<blockquote><p><strong>Zustand</strong> vence em simplicidade e tamanho. Use quando você quer estado gerenciado sem complexidade.</p></blockquote>
<blockquote><p><strong>Jotai</strong> é superior para composição e múltiplas unidades de estado independentes. Melhor para microfrontends.</p></blockquote>
<blockquote><p><strong>Recoil</strong> é mais poderoso para dependências complexas e async, com melhor DevTools.</p></blockquote>
<p>Uma tabela mental: Zustand = Redux simplificado. Jotai = estado atômico. Recoil = reatividade total.</p>
<h2>Conclusão</h2>
<p>Aprendemos que não existe "melhor" biblioteca—existe a mais adequada para seu contexto. <strong>Zustand</strong> é sua escolha se simplicidade é prioridade e seu estado é relativamente plano. <strong>Jotai</strong> brilha em aplicações modernas com muitos pedaços de estado independentes e composição. <strong>Recoil</strong> é a escolha para aplicações complexas que exigem reatividade profunda e sincronização elegante.</p>
<p>Minha recomendação profissional: comece com Zustand para 80% dos projetos. Use Jotai se trabalha com múltiplos átomos independentes. Reserve Recoil para when you need advanced reactivity patterns and are willing to accept a larger bundle and slightly steeper learning curve.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://github.com/pmndrs/zustand" target="_blank" rel="noopener noreferrer">Zustand Official Documentation</a></li>
<li><a href="https://jotai.org/" target="_blank" rel="noopener noreferrer">Jotai Documentation</a></li>
<li><a href="https://recoiljs.org/" target="_blank" rel="noopener noreferrer">Recoil Official Docs</a></li>
<li><a href="https://blog.logrocket.com/" target="_blank" rel="noopener noreferrer">React State Management Comparison - LogRocket</a></li>
<li><a href="https://kentcdodds.com/blog" target="_blank" rel="noopener noreferrer">State Management in React - Kent C. Dodds</a></li>
</ul>