Селекторы и tearing

Селектор — это и есть подписка. Читай срез — и перерисовывайся только когда меняется этот срез. Стор предоставляет хук, который принимает функцию-селектор; хук запускает селектор, запоминает результат и перезапускает твой компонент только когда выбранное значение меняется по проверке равенства стора. Чтение всего объекта стора означает, что любое изменение где угодно тебя будит.

// store.ts (в стиле Zustand; форма одинакова для любого стора с селекторами)
const useCart = create<CartState>((set) => ({
  items: [],
  couponOpen: false,
  addItem: (i) => set((s) => ({ items: [...s.items, i] })),
}));

// читает ОДНО поле → перерисовывается только когда меняется items.length
function CartBadge() {
  const count = useCart((s) => s.items.length);
  return <span>Cart ({count})</span>;
}

CartBadge теперь слеп к couponOpen, к правкам купона, ко всему кроме количества товаров. Эта избирательность и есть паттерн — без неё бейдж перерисовывался бы каждый раз, когда кто-нибудь трогает любое поле.

Читай через хук стора, никогда через сырую модульную переменную — именно это защищает тебя от tearing. «Tearing» (разрыв) — это когда один проход рендера читает два разных значения одного и того же состояния, потому что значение изменилось посреди рендера. React 18+ рендерит конкурентно: он может приостановить, уступить и возобновить рендер. Если компонент читает обычную мутабельную модульную переменную напрямую, обновление между «уступить» и «возобновить» порождает рендер, где часть дерева видела старое значение, а часть — новое: разорванный, внутренне несогласованный UI.

// ❌ сырое чтение — нет подписки, и tearing при конкурентном рендеринге
let cartModule = { items: [] as Item[] };
function Bad() {
  return <span>{cartModule.items.length}</span>; // устаревшее + риск tearing
}

// ✅ хук стора построен на useSyncExternalStore, который гарантирует,
// что каждое чтение в проходе рендера видит один консистентный снимок
function Good() {
  const count = useCart((s) => s.items.length);
  return <span>{count}</span>;
}

Хук стора построен на useSyncExternalStore, чья единственная задача — давать React один консистентный снимок на рендер и форсировать синхронную перерисовку, если внешнее значение изменилось во время конкурентного прохода. Вот почему правило «используй хук, а не переменную» существует — это не стиль, это корректность.

Ловушка: селектор, строящий свежий объект или массив на каждый вызов, ломает мемоизацию и перерисовывается бесконечно. Стор по умолчанию решает «изменилось ли выбранное значение?» сравнением по ссылке (Object.is). Селектор, возвращающий { a, b } или [x, y], конструирует совершенно новую ссылку на каждый запуск, так что сравнение всегда «изменилось», так что компонент перерисовывается на каждое обновление стора — тот самый режим отказа, ради предотвращения которого существует весь этот урок.

// ❌ свежий объект на каждый вызов → Object.is(prev, next) всегда false
// → перерисовка на КАЖДОЕ изменение стора, даже не относящееся
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>;
}

Выглядит корректно и рендерит правильные числа — поэтому и переживает ревью. Баг безмолвен: это не неверный вывод, это потраченные впустую рендеры, невидимые, пока профайлер не покажет этот компонент, мигающий на каждое нажатие клавиши где-то ещё в приложении.

Исправление: скажи стору сравнивать выбранное значение по поверхностному равенству — либо выбирай примитивы. Поверхностное равенство сравнивает каждый ключ/элемент верхнего уровня по ссылке вместо сравнения ссылки контейнера. Теперь { count: 2, total: 40 } равен { count: 2, total: 40 } прошлого рендера, так что перерисовка не срабатывает, пока поле реально не изменится.

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

// ✅ поверхностное равенство на возвращаемом объекте → перерисовка только
// когда count или total реально меняются
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>;
}

// ✅ или обойди это вовсе: выбери два примитива в двух хуках
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>;
}

Правило большого пальца: селектору, возвращающему примитив (число, строку, булево), функция равенства не нужна — Object.is уже делает правильное. Селектор, возвращающий свежий объект или массив, обязан идти в паре с компаратором поверхностного равенства, иначе он сводит на нет ту самую мемоизацию, ради которой селектор и существует.