Колокация и подъём состояния

Колокация: состояние принадлежит самому нижнему компоненту, который его реально читает. Если значение потребляет ровно одно поддерево — туда и идёт useState. Колокация — не предпочтение опрятности: когда состояние живёт в компоненте X, каждый рендер, вызванный этим состоянием, ограничен X и его детьми. Поставь его на уровень выше — и React перерисует весь этот уровень, включая соседей, которые никогда не касаются значения.

// колокация: состояние открыт/закрыт живёт в единственном, кто его использует
function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <li>
      <button onClick={() => setOpen((o) => !o)}>{q}</button>
      {open && <p>{a}</p>}
    </li>
  );
}

Переключение одного FAQ-пункта перерисовывает этот пункт. Список, шапка страницы, соседние пункты — нетронуты. Расположение состояния и есть граница перерисовки.

Переподнятое состояние — тихое умолчание, которое стоит тебе рендеров и проброса пропсов. Рефлекс «подними, чтобы было доступно» помещает значение далеко над его единственным читателем. Теперь React перерисовывает всё между владельцем и читателем на каждое изменение, а ты протягиваешь значение (и его сеттер) через компоненты, которым оно безразлично.

// переподнято: `draft` живёт в странице, но читает его только <Composer>
function InboxPage() {
  const [draft, setDraft] = useState("");        // неправильный дом
  return (
    <Layout>
      <Sidebar />                                  {/* перерисовка на каждое нажатие */}
      <ThreadList />                               {/* перерисовка на каждое нажатие */}
      <Composer draft={draft} setDraft={setDraft} /> {/* единственный реальный читатель */}
    </Layout>
  );
}

Каждый символ, набранный в <Composer>, перерисовывает <Sidebar> и <ThreadList>. Они каждый раз рендерят один и тот же вывод — чистая трата, — а draft/setDraft теперь без причины стали частью публичной поверхности страницы.

Исправление механическое: перенеси состояние вниз, в компонент, который его читает. Удали useState из родителя, выброси пропсы, которые пробрасывал, и объяви состояние внутри потребителя. След перерисовки схлопывается до этого потребителя; проброс пропсов исчезает.

// колокация: состояние перенесено в единственного читателя
function InboxPage() {
  return (
    <Layout>
      <Sidebar />
      <ThreadList />
      <Composer />            {/* нечего пробрасывать */}
    </Layout>
  );
}

function Composer() {
  const [draft, setDraft] = useState("");   // дом там, где читают
  return <textarea value={draft} onChange={(e) => setDraft(e.target.value)} />;
}

Теперь набор текста перерисовывает только <Composer>. <Sidebar> и <ThreadList> инертны во время редактирования. Никакого memo, никакого useCallback, никакой охоты с профайлером — просто правильный дом для состояния. Большинство багов «почему оно перерисовывается» — это баг колокации в маскировке, и перенос состояния вниз чинит их у источника, а не латает симптомы мемоизацией.

Поднимай вверх только тогда, когда два компонента действительно делятся состоянием, — и только до их ближайшего общего предка. Когда двум соседям нужно читать или писать одно и то же значение (фильтр, который нужен и <SearchBox>, и <Results>), ни один отдельный ребёнок не может им владеть. Подними его в ближайший компонент, содержащий оба, передай значение вниз, передай сеттеры вниз. Ближайший — не вершина приложения.

// общее: SearchBox пишет запрос, Results читает → подними к их родителю
function ProductSearch() {              // ближайший общий предок обоих
  const [query, setQuery] = useState("");
  return (
    <>
      <SearchBox query={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

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