Selectors and Performance

"use client";
 
import { useCartStore } from "@/stores/cart-store";
 
function CartBadge() {
  // Só re-renderiza quando o array de itens muda
  const itemCount = useCartStore((state) => state.items.length);
 
  return <span className="badge">{itemCount}</span>;
}
 
function CartTotal() {
  // Só re-renderiza quando o total muda
  const total = useCartStore((state) =>
    state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  );
 
  return <span>${total.toFixed(2)}</span>;
}

// stores/dashboard-store.ts
import { create } from "zustand";
 
interface DashboardStore {
  user: { name: string; avatar: string };
  notifications: { id: string; message: string }[];
  theme: "light" | "dark";
  sidebarOpen: boolean;
  toggleSidebar: () => void;
  toggleTheme: () => void;
  addNotification: (message: string) => void;
}
 
export const useDashboardStore = create<DashboardStore>((set) => ({
  user: { name: "Jane", avatar: "/avatar.png" },
  notifications: [],
  theme: "light",
  sidebarOpen: true,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
  toggleTheme: () => set((s) => ({ theme: s.theme === "light" ? "dark" : "light" })),
  addNotification: (message) =>
    set((s) => ({
      notifications: [...s.notifications, { id: crypto.randomUUID(), message }],
    })),
}));

// components/header.tsx
"use client";
 
import { useDashboardStore } from "@/stores/dashboard-store";
import { useShallow } from "zustand/react/shallow";
 
// Ruim: re-renderiza em QUALQUER mudança de estado
function HeaderBad() {
  const store = useDashboardStore();
  return <div>{store.user.name}</div>;
}
 
// Bom: só re-renderiza quando user.name muda
function HeaderGood() {
  const userName = useDashboardStore((s) => s.user.name);
  return <div>{userName}</div>;
}
 
// Bom: múltiplos valores com comparação rasa (shallow)
function HeaderWithMultiple() {
  const { name, avatar } = useDashboardStore(
    useShallow((s) => ({ name: s.user.name, avatar: s.user.avatar }))
  );
 
  return (
    <div>
      <img src={avatar} alt={name} />
      <span>{name}</span>
    </div>
  );
}
 
// Bom: selecionando múltiplos primitivos com array useShallow
function NotificationBar() {
  const [notifications, theme] = useDashboardStore(
    useShallow((s) => [s.notifications, s.theme])
  );
 
  return (
    <div className={theme}>
      {notifications.length} notificações
    </div>
  );
}

import { create } from "zustand";
import { StoreApi, UseBoundStore } from "zustand";
 
type WithSelectors<S> = S extends { getState: () => infer T }
  ? S & { use: { [K in keyof T]: () => T[K] } }
  : never;
 
function createSelectors<S extends UseBoundStore<StoreApi<object>>>(store: S) {
  const storeIn = store as WithSelectors<typeof store>;
  storeIn.use = {} as any;
  for (const key of Object.keys(storeIn.getState())) {
    (storeIn.use as any)[key] = () => storeIn((s: any) => s[key]);
  }
  return storeIn;
}
 
// Uso
const useCounterStoreBase = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));
 
export const useCounterStore = createSelectors(useCounterStoreBase);
 
// Seletores gerados automaticamente
const count = useCounterStore.use.count();
const increment = useCounterStore.use.increment();

import { useMemo } from "react";
 
function ExpensiveList() {
  const items = useCartStore((s) => s.items);
 
  // Memoriza computação cara
  const sortedItems = useMemo(
    () => [...items].sort((a, b) => b.price - a.price),
    [items]
  );
 
  return <ul>{sortedItems.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}

// Ações nunca mudam, então este seletor nunca dispara uma re-renderização
const increment = useCounterStore((s) => s.increment);
const reset = useCounterStore((s) => s.reset);

// resultado é tipado como number
const count = useStore((s: StoreState) => s.count);
 
// resultado é tipado como { name: string; email: string }
const user = useStore(
  useShallow((s: StoreState) => ({ name: s.user.name, email: s.user.email }))
);