State Management em 2025: Por Que Zustand e Jotai Estão Substituindo Redux

Olá HaWkers, o gerenciamento de estado em React evoluiu drasticamente. Zustand e Jotai estão ganhando adoção massiva por serem simples, poderosos e sem boilerplate.

Redux não morreu, mas para a maioria dos projetos, essas novas libs são muito mais produtivas.

Zustand: State Management Minimalista

// store.js - Zustand
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  user: null,

  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),

  setUser: (user) => set({ user }),
  logout: () => set({ user: null })
}));

export default useStore;

// Component.jsx - Uso
function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

Zero boilerplate! Compare com Redux que precisaria de actions, reducers, types...

Jotai: Atomic State Management

// atoms.js
import { atom } from 'jotai';

export const countAtom = atom(0);
export const userAtom = atom(null);

// Derived atom
export const doubleCountAtom = atom(
  (get) => get(countAtom) * 2
);

// Component.jsx
import { useAtom, useAtomValue } from 'jotai';

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const doubled = useAtomValue(doubleCountAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Atômico e reativo! Componentes re-renderizam apenas quando atoms usados mudam.

Quando Usar Cada Um

Zustand: Apps com estado global simples, APIs diretas

Jotai: Apps complexos com múltiplos estados derivados

Redux: Apps enterprise legacy, DevTools avançado necessário

Em 2025, a tendência é simplicidade. Zustand e Jotai dominam novos projetos.

Bora pra cima! 🦅

🚀 Acessar Guia Completo