Когда тянуться к стору

Лестница по умолчанию: колокация → подъём → контекст. Стор — это ступень, на которую ты поднимаешься, только когда они перестают масштабироваться. Большинство порывов «нам нужен стор» на самом деле — «это состояние на два уровня ниже, чем надо» или «этот пропс пробрасывается на четыре уровня». Подъём и контекст чинят это бесплатно, без новой зависимости и без второго источника правды. Senior-приём — сперва исчерпать лестницу.

// ступень 1: колокация — состояние живёт рядом со своим единственным потребителем
function SearchBox() {
  const [q, setQ] = useState("");
  return <input value={q} onChange={(e) => setQ(e.target.value)} />;
}

// ступень 2: подъём — ближайший общий родитель владеет общим состоянием
// ступень 3: контекст — прекрати проброс редко меняющегося общего состояния (тема, авторизованный пользователь)

Стор — это ступень 4. Ты тянешься к нему, когда ступени 1–3 дают либо проброс пропсов на глубину, которую не отрефакторить, либо контекст, чьи обновления перерисовывают слишком многое. Не раньше.

Давление первое: дальние ветви. Когда два далеко разнесённых поддерева делят состояние, подъём заталкивает его абсурдно высоко, а контекст становится широкой сетью. Если палитре команд в шапке и панели деталей в глубоком маршруте обоим нужен один и тот же выбор, ближайший общий родитель — это корень приложения, так что подъём туда означает протягивание пропсов или провайдера через всё, что между ними. Стор позволяет каждому потребителю подписаться напрямую, без общего предка, занимающегося прокладкой.

// стор, потребляемый двумя несвязанными ветвями — общего родителя между ними нет
const useSelection = create<{ id: string | null; select: (id: string) => void }>(
  (set) => ({ id: null, select: (id) => set({ id }) })
);

function HeaderPalette() {
  const select = useSelection((s) => s.select); // подписан на то, что не меняется
  return <button onClick={() => select("user-42")}>Jump to user</button>;
}
function DeepDetailPanel() {
  const id = useSelection((s) => s.id); // перерисовывается, только когда меняется id
  return <p>Selected: {id ?? "none"}</p>;
}

Стор уплощает топологию: подписка заменяет цепочку посредников, которым нет дела до этого состояния.

Давление второе: частые обновления, которые заштормили бы контекст. У контекста нет селектора — каждый потребитель провайдера перерисовывается на любое изменение значения, даже потребитель, читающий только несвязанное поле. Для состояния, которое обновляется много раз в секунду (позиция живого курсора, жест перетаскивания, потоковый счётчик, canvas), один контекст превращает одно обновление в шторм перерисовок по всему дереву. Стор подписывается по селектору, так что компонент перерисовывается, только когда меняется его срез.

// высокая частота: движения указателя срабатывают десятки раз в секунду
const useCursor = create<{ x: number; y: number; move: (x: number, y: number) => void }>(
  (set) => ({ x: 0, y: 0, move: (x, y) => set({ x, y }) })
);

function Crosshair() {
  // только этот компонент перерисовывается при move — соседи, читающие другие срезы, нет
  const { x, y } = useCursor((s) => ({ x: s.x, y: s.y }));
  return <line style={{ transform: `translate(${x}px, ${y}px)` }} />;
}

Тот же move через контекст перерисовал бы каждого потребителя того провайдера, десятки раз в секунду. Селектор стора — это то, что делает частое состояние доступным по цене.

Давления третье и четвёртое: сохранность между маршрутами и devtools. Стор живёт вне дерева компонентов, поэтому переживает размонтирование — и предоставляет единый инспектируемый объект состояния. Поднятое состояние и состояние контекста умирают, когда их владеющее поддерево размонтируется при смене маршрута; сохранить его — значит поднять выше роутера, что часто означает… стор. Стор также даёт одно место, чтобы инспектировать, путешествовать во времени и логировать каждый переход — история Redux DevTools / middleware Zustand, — что является настоящей ценностью, когда переходы состояния достаточно сложны, чтобы «что изменилось и почему» было реальной ценой отладки.

import { persist } from "zustand/middleware";

// переживает смены маршрута и перезагрузки; один инспектируемый объект
const useDraft = create(
  persist<{ text: string; setText: (t: string) => void }>(
    (set) => ({ text: "", setText: (text) => set({ text }) }),
    { name: "draft" } // сохраняется в хранилище, восстанавливается между маршрутами/перезагрузками
  )
);

Эти четыре давления — дальность, частота, сохранность, отлаживаемость — единственные причины, побеждающие более простую лестницу. Если ни одно не применимо, у тебя нет задачи формы «стор».