Selectors and tearing

A selector is the subscription. Read a slice, and you re-render only when that slice changes. A store exposes a hook that takes a selector function; the hook runs the selector, remembers the result, and re-runs your component only when the selected value changes by the store’s equality check. Reading the whole store object instead means any change anywhere wakes you up.

// store.ts (Zustand-style; the shape is the same for any selector store)
const useCart = create<CartState>((set) => ({
  items: [],
  couponOpen: false,
  addItem: (i) => set((s) => ({ items: [...s.items, i] })),
}));

// reads ONE field → re-renders only when items.length changes
function CartBadge() {
  const count = useCart((s) => s.items.length);
  return <span>Cart ({count})</span>;
}

CartBadge is now blind to couponOpen, to coupon edits, to anything but the item count. That selectivity is the pattern — without it the badge would re-render every time anyone touched any field.

Read through the store’s hook, never a raw module variable — that is what protects you from tearing. “Tearing” is when one render pass reads two different values of the same state because the value changed mid-render. React 18+ renders concurrently: it can pause, yield, and resume a render. If a component reads a plain mutable module variable directly, an update between yield and resume produces a render where part of the tree saw the old value and part saw the new — a torn, internally inconsistent UI.

// ❌ raw read — no subscription, and tears under concurrent rendering
let cartModule = { items: [] as Item[] };
function Bad() {
  return <span>{cartModule.items.length}</span>; // stale + tearing risk
}

// ✅ the store hook is built on useSyncExternalStore, which guarantees
// every read in a render pass sees one consistent snapshot
function Good() {
  const count = useCart((s) => s.items.length);
  return <span>{count}</span>;
}

The store’s hook is built on useSyncExternalStore, whose whole job is to give React a single consistent snapshot per render and force a synchronous re-render if the external value changed during a concurrent pass. That is why the rule “use the hook, not the variable” exists — it is not style, it is correctness.

The pitfall: a selector that builds a fresh object or array each call breaks memoization and re-renders forever. The store decides “did the selected value change?” with a reference comparison (Object.is) by default. A selector returning { a, b } or [x, y] constructs a brand-new reference on every run, so the comparison is always “changed”, so the component re-renders on every store update — the failure mode this whole lesson exists to prevent.

// ❌ fresh object every call → Object.is(prev, next) is always false
// → re-renders on EVERY store change, even unrelated ones
function CartSummary() {
  const { count, total } = useCart((s) => ({
    count: s.items.length,
    total: s.items.reduce((n, i) => n + i.price, 0),
  }));
  return <p>{count} items · ${total}</p>;
}

It looks correct and renders the right numbers — which is why it survives review. The bug is silent: it’s not wrong output, it’s wasted renders, invisible until a profiler shows this component flashing on every keystroke elsewhere in the app.

The fix: tell the store to compare the selected value by shallow equality, or select primitives. Shallow-equal compares each top-level key/element by reference instead of comparing the container reference. Now { count: 2, total: 40 } equals last render’s { count: 2, total: 40 }, so no re-render fires unless a field actually changes.

import { useShallow } from "zustand/react/shallow";

// ✅ shallow equality on the returned object → re-renders only when
// count or total actually changes
function CartSummary() {
  const { count, total } = useCart(
    useShallow((s) => ({
      count: s.items.length,
      total: s.items.reduce((n, i) => n + i.price, 0),
    })),
  );
  return <p>{count} items · ${total}</p>;
}

// ✅ or sidestep it entirely: select two primitives in two hooks
function CartSummaryPrimitive() {
  const count = useCart((s) => s.items.length);
  const total = useCart((s) => s.items.reduce((n, i) => n + i.price, 0));
  return <p>{count} items · ${total}</p>;
}

Rule of thumb: a selector returning a primitive (number, string, boolean) needs no equality function — Object.is already does the right thing. A selector returning a fresh object or array must be paired with a shallow-equality comparator, or it defeats the very memoization the selector exists to provide.