Gerenciamento de Estado com Zustand

Zustand: Simplicidade e Performance

Zustand é uma biblioteca minimalista para gerenciamento de estado em React, oferecendo uma API simples e performática.

Instalação

npm install zustand

Criando uma Store

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

export const useCounterStore = create((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
    reset: () => set({ count: 0 }),
}));

Usando a Store

import { useCounterStore } from './store/useCounterStore';

function Counter() {
    const { count, increment, decrement } = useCounterStore();
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
    );
}

Seletores

// Evita re-renders desnecessários
const increment = useCounterStore((state) => state.increment);