Selectors and Performance

"use client";
 
import { useCartStore } from "@/stores/cart-store";
 
function CartBadge() {
  // Only re-renders when items array changes
  const itemCount = useCartStore((state) => state.items.length);
 
  return <span className="badge">{itemCount}</span>;
}
 
function CartTotal() {
  // Only re-renders when total changes
  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";
 
// Bad: re-renders on ANY store change
function HeaderBad() {
  const store = useDashboardStore();
  return <div>{store.user.name}</div>;
}
 
// Good: only re-renders when user.name changes
function HeaderGood() {
  const userName = useDashboardStore((s) => s.user.name);
  return <div>{userName}</div>;
}
 
// Good: multiple values with shallow comparison
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>
  );
}
 
// Good: selecting multiple primitives with useShallow array
function NotificationBar() {
  const [notifications, theme] = useDashboardStore(
    useShallow((s) => [s.notifications, s.theme])
  );
 
  return (
    <div className={theme}>
      {notifications.length} notifications
    </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;
}
 
// Usage
const useCounterStoreBase = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));
 
export const useCounterStore = createSelectors(useCounterStoreBase);
 
// Auto-generated selectors
const count = useCounterStore.use.count();
const increment = useCounterStore.use.increment();

import { useMemo } from "react";
 
function ExpensiveList() {
  const items = useCartStore((s) => s.items);
 
  // Memoize expensive computation
  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>;
}

// Actions never change, so this selector never triggers a re-render
const increment = useCounterStore((s) => s.increment);
const reset = useCounterStore((s) => s.reset);

// result is typed as number
const count = useStore((s: StoreState) => s.count);
 
// result is typed as { name: string; email: string }
const user = useStore(
  useShallow((s: StoreState) => ({ name: s.user.name, email: s.user.email }))
);