Подъём состояния

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

В доске из части II правда лежала в одном объекте state на уровне модуля, и render() рисовал из него всё. React режет экран на компоненты, и у каждого своя память — свой useState. Пока значение нужно одному компоненту, вопросов нет. Но вот шапка магазина показывает, сколько товаров в корзине, а кнопка «добавить» стоит в списке товаров — в другом компоненте. Рука из части II тянется к знакомому: завести переменную модуля и читать её из обоих мест. Предскажите, что покажет шапка после нажатия «добавить» и что — после нажатия «меню».

tsx

// правда в переменной модуля — как объект state в доске из части II
let inCart = 0;

function Header() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <header>
      <span id="badge">в корзине: {inCart}</span>
      <button id="menu" onClick={() => setMenuOpen(!menuOpen)}>
        меню {menuOpen ? "открыто" : "закрыто"}
      </button>
    </header>
  );
}

function Products() {
  return <button id="add" onClick={() => { inCart += 1; }}>добавить чай</button>;
}

function App() {
  return (
    <div>
      <Header />
      <Products />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
const badge = () => document.getElementById("badge")!.textContent;
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => console.log("после «добавить»:", badge()), 100);
setTimeout(() => document.getElementById("menu")!.click(), 150);
setTimeout(() => console.log("после «меню»:", badge()), 200);

страница примера

Сначала предположите, что выведет код

Переменная изменилась, а шапка — нет: у React не было повода её перерисовать. Из статьи «Триггер, рендер, коммит» вы помните: заявку на отрисовку подаёт только сеттер состояния, а inCart += 1 — не сеттер, это присваивание, о котором React не узнаёт. Зато клик по «меню» вызвал setMenuOpen, Header перерисовался, заново прочитал переменную — и показал единицу. Экран догнал данные случайно, по чужому поводу.

Это худший вид поломки: не «не работает», а «работает иногда». В части II вас страховал ручной вызов render() после каждого изменения — вы держали его в руках. В React отрисовкой распоряжается он сам, и повод у него один: изменилось состояние, которое он хранит. Всё, что живёт снаружи useState, для React невидимо — переменная модуля, поле объекта, свойство window.

Состояние — это то, что лежит в useState. Только его изменение вызывает отрисовку; переменная модуля — не состояние, даже если в ней «правда».

Раз значение обязано лежать в useState, а память у каждого компонента своя, остаётся вопрос: в чьём? Ответ React: у того, кто видит обоих, — у ближайшего общего родителя. App возвращает и Header, и Products, значит, inCart переезжает в App. Вниз в шапку число приезжает пропсом, как в статье «Пропсы и их типы». Списку товаров нужно не число, а способ его изменить — и это тоже пропс, только с функцией внутри.

tsx

interface HeaderProps {
  count: number;
}

function Header({ count }: HeaderProps) {
  return <span id="badge">в корзине: {count}</span>;
}

interface ProductsProps {
  // функция — такой же пропс, как число: список сообщает наверх, а не меняет сам
  onAdd: () => void;
}

function Products({ onAdd }: ProductsProps) {
  return <button id="add" onClick={onAdd}>добавить чай</button>;
}

function App() {
  // единственная правда о корзине — у того, кто видит и шапку, и список
  const [inCart, setInCart] = React.useState(0);
  return (
    <div>
      <Header count={inCart} />
      <Products onAdd={() => setInCart(inCart + 1)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("add")!.click(), 50);
setTimeout(() => document.getElementById("add")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("badge")!.textContent);
}, 200);

страница примера

Сначала предположите, что выведет код

Теперь у корзины ровно одно место хранения, и оба компонента смотрят на него: шапка через пропс count, список через onAdd. Клик в Products вызывает функцию, созданную в App; та вызывает setInCart — сеттер состояния App; App перерисовывается и, по правилу из статьи про рендер и коммит, перерисовывает всё, что возвращает, — в том числе шапку с новым числом.

Данные текут вниз пропсами, события — вверх функциями. Схема повторяет делегирование из части II: там клик всплывал к контейнеру, а data-action подсказывал, что делать. Разница в том, что провод теперь видит компилятор — с обоих концов. Уберите onAdd из разметки App и посмотрите, что он скажет.

tsx

interface ProductsProps {
  onAdd: () => void;
}

function Products({ onAdd }: ProductsProps) {
  return <button onClick={onAdd}>добавить чай</button>;
}

function App() {
  const [inCart, setInCart] = React.useState(0);
  return (
    <div>
      <span>в корзине: {inCart}</span>
      <Products />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

страница примера

Сначала предположите, что выведет код

«Свойство onAdd отсутствует в типе {} и является обязательным в типе ProductsProps» — компилятор нашёл оборванный провод до запуска. В части II опечатка в data-action молчала до первого клика, и то если вы догадались нажать. Кнопка здесь тоже молчит — код после диагностики выполняется, как и в tsc, — но диагностика уже на экране, а не в отчёте пользователя.

Имя onAdd — соглашение, а не требование: пропс-функцию называют как событие — onSelect, onChange, onClose. Родитель читает разметку как список того, о чём ему сообщат.

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

tsx

interface PanelProps {
  id: string;
  title: string;
}

function Panel({ id, title }: PanelProps) {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <section>
      <button id={id} onClick={() => setIsOpen(true)}>{title}</button>
      <p id={id + "-body"}>{isOpen ? "открыта" : "закрыта"}</p>
    </section>
  );
}

function Faq() {
  return (
    <div>
      <Panel id="delivery" title="Доставка" />
      <Panel id="payment" title="Оплата" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Faq />);
const body = (id: string) => document.getElementById(id + "-body")!.textContent;
setTimeout(() => document.getElementById("delivery")!.click(), 50);
setTimeout(() => document.getElementById("payment")!.click(), 100);
setTimeout(() => {
  console.log(body("delivery"), body("payment"));
}, 200);

страница примера

Сначала предположите, что выведет код

Открыты обе — и ни одна панель не могла поступить иначе. Чтобы закрыться при открытии соседки, панели нужно о соседке знать, а из статьи про рендер и коммит вы помните: состояние идёт вниз, но не вбок. У панели нет ни сеттера соседки, ни даже её имени. Правило «не больше одной» — не свойство панели, это свойство набора. Значит, и хранить его должен тот, кто набором владеет.

У родителя вместо двух булевых одно состояние — id открытой панели или null. Панель перестаёт помнить и начинает получать: открыта она или нет — пропс, «меня нажали» — функция. Ни одна панель не решает про себя; решает Faq, и его решение по построению не может нарушить правило.

tsx

interface PanelProps {
  id: string;
  title: string;
  isOpen: boolean;
  onShow: () => void;
}

function Panel({ id, title, isOpen, onShow }: PanelProps) {
  return (
    <section>
      <button id={id} onClick={onShow}>{title}</button>
      <p id={id + "-body"}>{isOpen ? "открыта" : "закрыта"}</p>
    </section>
  );
}

function Faq() {
  const [activeId, setActiveId] = React.useState<string | null>(null);
  return (
    <div>
      <Panel
        id="delivery"
        title="Доставка"
        isOpen={activeId === "delivery"}
        onShow={() => setActiveId("delivery")}
      />
      <Panel
        id="payment"
        title="Оплата"
        isOpen={activeId === "payment"}
        onShow={() => setActiveId("payment")}
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Faq />);
const body = (id: string) => document.getElementById(id + "-body")!.textContent;
setTimeout(() => document.getElementById("delivery")!.click(), 50);
setTimeout(() => document.getElementById("payment")!.click(), 100);
setTimeout(() => {
  console.log(body("delivery"), body("payment"));
}, 200);

interface PanelProps {
  id: string;
  title: string;
  isOpen: boolean;
  onShow: () => void;
}

function Panel({ id, title, isOpen, onShow }: PanelProps) {
  return (
    <section>
      <button id={id} onClick={onShow}>{title}</button>
      <p id={id + "-body"}>{isOpen ? "открыта" : "закрыта"}</p>
    </section>
  );
}

function Faq() {
  const [activeId, setActiveId] = React.useState<string | null>(null);
  return (
    <div>
      <Panel
        id="delivery"
        title="Доставка"
        isOpen={activeId === "delivery"}
        onShow={() => setActiveId("delivery")}
      />
      <Panel
        id="payment"
        title="Оплата"
        isOpen={activeId === "payment"}
        onShow={() => setActiveId("payment")}
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Faq />);
const body = (id: string) => document.getElementById(id + "-body")!.textContent;
setTimeout(() => document.getElementById("delivery")!.click(), 50);
setTimeout(() => document.getElementById("payment")!.click(), 100);
setTimeout(() => {
  console.log(body("delivery"), body("payment"));
}, 200);

страница примера

Сначала предположите, что выведет код

Присмотритесь к форме состояния: не два isOpen, а один activeId. Это правило из статьи «Как выбирать структуру состояния» — противоречивые сочетания должны быть невыразимы, — только применённое сразу к нескольким компонентам. Два флага допускали «обе открыты»; строка допускает ровно одну. Свой isOpen каждая панель получает уже вычисленным: activeId === "delivery".

Подъём меняет не только адрес состояния, но и его форму: два флага в двух компонентах у родителя становятся одним значением.

Сейчас открытую панель нельзя закрыть: onShow умеет только открывать. Чтобы второй клик закрывал, менять нужно не панель, а родителя — решение по-прежнему у него: setActiveId(activeId === id ? null : id), а пропс честнее назвать onToggle. Панель об этой правке не узнает: она как сообщала «меня нажали», так и сообщает. В этом и удобство управляемого компонента — вся логика набора в одном месте, и меняется она в одном месте.

Самый живучий компромисс звучит разумно: «пусть у ребёнка будет своя копия для отзывчивости, а родителю он будет сообщать». Счётчик количества ниже так и устроен: хранит value у себя и на каждый шаг зовёт onChange. У родителя есть кнопка «очистить». Жмём «+» дважды, «очистить», снова «+». Предскажите обе строки вывода.

tsx

interface StepperProps {
  initial: number;
  onChange: (next: number) => void;
}

function Stepper({ initial, onChange }: StepperProps) {
  // своя копия «для отзывчивости» плюс сообщение наверх
  const [value, setValue] = React.useState(initial);
  const step = () => {
    setValue(value + 1);
    onChange(value + 1);
  };
  return <button id="plus" onClick={step}>+ (у кнопки: {value})</button>;
}

function Cart() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Stepper initial={count} onChange={setCount} />
      <button id="clear" onClick={() => setCount(0)}>очистить</button>
      <p id="total">в корзине: {count}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart />);
const click = (id: string) => document.getElementById(id)!.click();
const text = (id: string) => document.getElementById(id)!.textContent;
setTimeout(() => click("plus"), 50);
setTimeout(() => click("plus"), 100);
setTimeout(() => click("clear"), 150);
setTimeout(() => {
  console.log("после очистки:", text("plus"), "/", text("total"));
}, 200);
setTimeout(() => click("plus"), 250);
setTimeout(() => {
  console.log("ещё один шаг:", text("plus"), "/", text("total"));
}, 350);

interface StepperProps {
  initial: number;
  onChange: (next: number) => void;
}

function Cart() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Stepper initial={count} onChange={setCount} />
      <button id="clear" onClick={() => setCount(0)}>очистить</button>
      <p id="total">в корзине: {count}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart />);
const click = (id: string) => document.getElementById(id)!.click();
const text = (id: string) => document.getElementById(id)!.textContent;
setTimeout(() => click("plus"), 50);
setTimeout(() => click("plus"), 100);
setTimeout(() => click("clear"), 150);
setTimeout(() => {
  console.log("после очистки:", text("plus"), "/", text("total"));
}, 200);
setTimeout(() => click("plus"), 250);
setTimeout(() => {
  console.log("ещё один шаг:", text("plus"), "/", text("total"));
}, 350);

страница примера

Сначала предположите, что выведет код

После «очистить» корзина показывает ноль, а кнопка — двойку: setCount(0) изменил состояние Cart, а до копии в Stepper не дотянулся — useState(initial) читает аргумент один раз, как вы видели в статье о структуре состояния. Дальше хуже: следующий шаг считается от копии, и родитель получает тройку. Пользователь видел ноль, нажал плюс один раз — и получил три.

Здесь нет забытой строки, которую можно дописать. У каждой копии свой набор обработчиков: step меняет обе, «очистить» — одну. Любой обработчик, который трогает одну копию и не трогает другую, разводит их, и таких обработчиков со временем становится больше, а не меньше. «Досинхронизировать» эффектом — useEffect(() => setValue(initial), [initial]) — вы уже пробовали в статье «Когда эффект не нужен»: копия догоняет с опозданием на кадр, и этот кадр виден. Две копии одного значения не синхронизируют — от одной избавляются.

tsx

interface StepperProps {
  value: number;
  onChange: (next: number) => void;
}

function Stepper({ value, onChange }: StepperProps) {
  // ничего не хранит: показывает, что дали, и сообщает, что нажали
  return <button id="plus" onClick={() => onChange(value + 1)}>+ (у кнопки: {value})</button>;
}

function Cart() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Stepper value={count} onChange={setCount} />
      <button id="clear" onClick={() => setCount(0)}>очистить</button>
      <p id="total">в корзине: {count}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart />);
const click = (id: string) => document.getElementById(id)!.click();
const text = (id: string) => document.getElementById(id)!.textContent;
setTimeout(() => click("plus"), 50);
setTimeout(() => click("plus"), 100);
setTimeout(() => click("clear"), 150);
setTimeout(() => {
  console.log("после очистки:", text("plus"), "/", text("total"));
}, 200);
setTimeout(() => click("plus"), 250);
setTimeout(() => {
  console.log("ещё один шаг:", text("plus"), "/", text("total"));
}, 350);

interface StepperProps {
  value: number;
  onChange: (next: number) => void;
}

function Stepper({ value, onChange }: StepperProps) {
  // ничего не хранит: показывает, что дали, и сообщает, что нажали
  return <button id="plus" onClick={() => onChange(value + 1)}>+ (у кнопки: {value})</button>;
}

function Cart() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <Stepper value={count} onChange={setCount} />
      <button id="clear" onClick={() => setCount(0)}>очистить</button>
      <p id="total">в корзине: {count}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart />);
const click = (id: string) => document.getElementById(id)!.click();
const text = (id: string) => document.getElementById(id)!.textContent;
setTimeout(() => click("plus"), 50);
setTimeout(() => click("plus"), 100);
setTimeout(() => click("clear"), 150);
setTimeout(() => {
  console.log("после очистки:", text("plus"), "/", text("total"));
}, 200);
setTimeout(() => click("plus"), 250);
setTimeout(() => {
  console.log("ещё один шаг:", text("plus"), "/", text("total"));
}, 350);

страница примера

Сначала предположите, что выведет код

У Stepper не осталось состояния — и не осталось способа разойтись с родителем. Компонент либо владеет значением, либо получает его; третьего нет. Компонент со своим useState называют неуправляемым: снаружи ему можно дать только стартовое значение — initial, defaultValue, — дальше он живёт сам. Компонент, который получает значение и функцию, — управляемым: он ничего не решает, только показывает и сообщает. Это те же слова, что у полей ввода в главе о событиях и формах, и смысл у них тот же.

	Неуправляемый	Управляемый
Где значение	в своём `useState`	в состоянии родителя
Что получает	`initialValue` — только старт	`value` и `onChange`
Кто меняет	только сам компонент	родитель — сеттером; компонент лишь просит через `onChange`
Когда уместен	значение никому снаружи не нужно	значение показывают или меняют ещё где-то
Как назвать пропс	`initialCount`, `defaultOpen`	`count`, `isOpen`

Имя пропса — обещание. initialValue говорит «дальше обновлений не жди», value — «я всегда актуален». Пропс не может быть и тем и другим.

Подъём — не «всё состояние в App». Поднимают до ближайшего компонента, который видит всех, кому значение нужно, и ни на шаг выше. Ниже menuOpen положили в корень «на всякий случай», хотя читает его только шапка. Предскажите, сколько раз напечатается «отрисовка Products» после двух кликов по меню.

tsx

interface HeaderProps {
  count: number;
  menuOpen: boolean;
  onToggleMenu: () => void;
}

function Header({ count, menuOpen, onToggleMenu }: HeaderProps) {
  return (
    <header>
      <span>в корзине: {count}</span>
      <button id="menu" onClick={onToggleMenu}>
        меню {menuOpen ? "открыто" : "закрыто"}
      </button>
    </header>
  );
}

interface ProductsProps {
  onAdd: () => void;
}

function Products({ onAdd }: ProductsProps) {
  console.log("отрисовка Products");
  return <button id="add" onClick={onAdd}>добавить чай</button>;
}

function App() {
  const [inCart, setInCart] = React.useState(0);
  // меню нужно только шапке, но лежит в корне — «на всякий случай»
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <div>
      <Header count={inCart} menuOpen={menuOpen} onToggleMenu={() => setMenuOpen(!menuOpen)} />
      <Products onAdd={() => setInCart(inCart + 1)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("menu")!.click(), 50);
setTimeout(() => document.getElementById("menu")!.click(), 100);

interface HeaderProps {
  count: number;
  menuOpen: boolean;
  onToggleMenu: () => void;
}

function Header({ count, menuOpen, onToggleMenu }: HeaderProps) {
  return (
    <header>
      <span>в корзине: {count}</span>
      <button id="menu" onClick={onToggleMenu}>
        меню {menuOpen ? "открыто" : "закрыто"}
      </button>
    </header>
  );
}

interface ProductsProps {
  onAdd: () => void;
}

function Products({ onAdd }: ProductsProps) {
  console.log("отрисовка Products");
  return <button id="add" onClick={onAdd}>добавить чай</button>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("menu")!.click(), 50);
setTimeout(() => document.getElementById("menu")!.click(), 100);

страница примера

Сначала предположите, что выведет код

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

И не всякое состояние вообще нужно поднимать. Раскрыт ли выпадающий список, подсвечена ли строка под курсором, что набрано в поле поиска до нажатия «найти» — это никому, кроме самого компонента, не интересно, и такому состоянию место в нём. Признак, что пора поднимать, ровно один: значение читает или меняет кто-то ещё.

Вопрос	Да	Нет
Значение показывает или меняет другой компонент?	поднять к ближайшему общему родителю	оставить у себя
Есть правило, связывающее соседей: одна открыта, одна выбрана?	одно состояние у владельца набора	у каждого своя память
Компоненту нужен только старт, дальше он живёт сам?	пропс `initialX` и свой `useState`	пропсы `value` и `onChange`

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

Отрисовку вызывает только сеттер из useState: переменная модуля и любая «правда» вне состояния для React невидимы, и экран догонит её лишь случайно.
Когда значение нужно двум компонентам, его хранит ближайший общий родитель: вниз оно идёт пропсом, вверх — пропсом-функцией вроде onAdd.
Правило, связывающее соседей («открыта не больше одной»), не может соблюсти ни один из них: состояние набора хранит владелец набора — одним значением вместо нескольких флагов.
Две копии одного значения не синхронизируют: у каждой свои обработчики, и они разойдутся. Компонент либо владеет значением (свой useState, пропс initialX), либо получает его (value и onChange).
Поднимают до ближайшего общего родителя и ни на шаг выше: состояние в корне перерисовывает весь экран, а то, что нужно одному компоненту, остаётся в нём.
Компилятор видит оба конца провода: забытый пропс-функция — диагностика до запуска, а не молчащая кнопка, как с data-action в части II.

1/4Компонент Products по клику делает inCart += 1 с переменной модуля, а Header читает её в разметке. Что покажет Header сразу после клика?

2/4Две панели Panel хранят открытость каждая в своём useState. Нужно правило «открыта не больше одной». Где ему место?

3/4Stepper хранит копию value в useState(initial) и на шаг зовёт onChange(value + 1). Родитель сбросил своё count в ноль кнопкой. Что покажет Stepper?

4/4Значение menuOpen читает и меняет только Header. Куда его положить?

Поиск и список

Строка поиска хранит запрос у себя, а список товаров показывает всё подряд: запроса у него нет. Поднимите состояние так, чтобы после нажатия «искать «ка»» список показывал только подходящие товары. Чтобы не связываться с полем ввода, запрос задаётся кнопкой.

tsx

const ITEMS = ["чай", "какао", "капучино"];

function SearchBox() {
  const [query, setQuery] = React.useState("");
  return (
    <div>
      <button id="ka" onClick={() => setQuery("ка")}>искать «ка»</button>
      <span>запрос: «{query}»</span>
    </div>
  );
}

function List() {
  // список должен показывать только подходящие товары, но запроса у него нет
  return <p id="list">{ITEMS.join(", ")}</p>;
}

function Shop() {
  return (
    <div>
      <SearchBox />
      <List />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Shop />);
setTimeout(() => document.getElementById("ka")!.click(), 50);
setTimeout(() => {
  console.log(document.getElementById("list")!.textContent); // чай, какао, капучино — а нужно какао, капучино
}, 150);

страница примера

Сначала предположите, что выведет код

Запрос нужен двум компонентам — значит, живёт у их общего родителя Shop. SearchBox становится управляемым: получает query и onChange. List получает query и фильтрует прямо в теле — результат поиска вычисляется, а не хранится, по правилу из статьи о структуре состояния.

tsxлистинг · не запускается

interface SearchBoxProps {
  query: string;
  onChange: (next: string) => void;
}

function SearchBox({ query, onChange }: SearchBoxProps) {
  return (
    <div>
      <button id="ka" onClick={() => onChange("ка")}>искать «ка»</button>
      <span>запрос: «{query}»</span>
    </div>
  );
}

interface ListProps {
  query: string;
}

function List({ query }: ListProps) {
  // производное: считается на каждой отрисовке, хранить нечего
  const found = ITEMS.filter((item) => item.includes(query));
  return <p id="list">{found.join(", ")}</p>;
}

function Shop() {
  const [query, setQuery] = React.useState("");
  return (
    <div>
      <SearchBox query={query} onChange={setQuery} />
      <List query={query} />
    </div>
  );
}

interface SearchBoxProps {
  query: string;
  onChange: (next: string) => void;
}

function SearchBox({ query, onChange }: SearchBoxProps) {
  return (
    <div>
      <button id="ka" onClick={() => onChange("ка")}>искать «ка»</button>
      <span>запрос: «{query}»</span>
    </div>
  );
}

interface ListProps {
  query: string;
}

function List({ query }: ListProps) {
  // производное: считается на каждой отрисовке, хранить нечего
  const found = ITEMS.filter((item) => item.includes(query));
  return <p id="list">{found.join(", ")}</p>;
}

function Shop() {
  const [query, setQuery] = React.useState("");
  return (
    <div>
      <SearchBox query={query} onChange={setQuery} />
      <List query={query} />
    </div>
  );
}

После правки вывод — «какао, капучино». Заведи вы в List своё состояние с результатом, оно разошлось бы с запросом при первом же изменении списка товаров.

Одна выбранная строка

Каждая строка списка помнит, выбрана ли она, поэтому после двух кликов выбраны обе. Нужно, чтобы выбранной оставалась только последняя нажатая. Почините, не добавляя эффектов.

tsx

type Item = { id: number; title: string };
const ITEMS: Item[] = [
  { id: 1, title: "чай" },
  { id: 2, title: "кофе" },
];

interface RowProps {
  item: Item;
}

function Row({ item }: RowProps) {
  const [selected, setSelected] = React.useState(false);
  return (
    <li id={"row-" + item.id} onClick={() => setSelected(true)}>
      {selected ? "[x] " : "[ ] "}
      {item.title}
    </li>
  );
}

function Picker() {
  return (
    <ul id="list">
      {ITEMS.map((item) => (
        <Row key={item.id} item={item} />
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Picker />);
setTimeout(() => document.getElementById("row-1")!.click(), 50);
setTimeout(() => document.getElementById("row-2")!.click(), 100);
setTimeout(() => {
  console.log(document.getElementById("list")!.textContent); // [x] чай[x] кофе — а нужно [ ] чай[x] кофе
}, 200);

страница примера

Сначала предположите, что выведет код

«Выбрана одна» — правило набора, и ни одна строка не может его соблюсти: о соседках она не знает. Состояние поднимается в Picker и меняет форму: вместо флага в каждой строке — один selectedId. Строка получает selected уже вычисленным и сообщает о клике через onSelect.

tsxлистинг · не запускается

interface RowProps {
  item: Item;
  selected: boolean;
  onSelect: () => void;
}

function Row({ item, selected, onSelect }: RowProps) {
  return (
    <li id={"row-" + item.id} onClick={onSelect}>
      {selected ? "[x] " : "[ ] "}
      {item.title}
    </li>
  );
}

function Picker() {
  // одно значение на набор: две выбранные строки невыразимы
  const [selectedId, setSelectedId] = React.useState<number | null>(null);
  return (
    <ul id="list">
      {ITEMS.map((item) => (
        <Row
          key={item.id}
          item={item}
          selected={item.id === selectedId}
          onSelect={() => setSelectedId(item.id)}
        />
      ))}
    </ul>
  );
}

interface RowProps {
  item: Item;
  selected: boolean;
  onSelect: () => void;
}

function Row({ item, selected, onSelect }: RowProps) {
  return (
    <li id={"row-" + item.id} onClick={onSelect}>
      {selected ? "[x] " : "[ ] "}
      {item.title}
    </li>
  );
}

function Picker() {
  // одно значение на набор: две выбранные строки невыразимы
  const [selectedId, setSelectedId] = React.useState<number | null>(null);
  return (
    <ul id="list">
      {ITEMS.map((item) => (
        <Row
          key={item.id}
          item={item}
          selected={item.id === selectedId}
          onSelect={() => setSelectedId(item.id)}
        />
      ))}
    </ul>
  );
}

Вывод — «[ ] чай[x] кофе». Заодно исчезла целая семья будущих задач: «снять выделение», «выбрать следующую», «есть ли выбранная» — всё это один selectedId в одном месте.

Опустить обратно

Подсказка у иконки помощи нужна только самой иконке, но её состояние лежит в App, и каждый клик по ней перерисовывает тяжёлый список. Переместите состояние так, чтобы «отрисовка списка» напечаталась один раз, а подсказка продолжала работать.

tsx

interface HelpIconProps {
  shown: boolean;
  onToggle: () => void;
}

function HelpIcon({ shown, onToggle }: HelpIconProps) {
  return (
    <button id="help" onClick={onToggle}>
      ? {shown ? "(нажмите, чтобы добавить товар)" : ""}
    </button>
  );
}

function HeavyList() {
  console.log("отрисовка списка");
  return <p>очень длинный список товаров</p>;
}

function App() {
  const [helpShown, setHelpShown] = React.useState(false);
  return (
    <div>
      <HelpIcon shown={helpShown} onToggle={() => setHelpShown(!helpShown)} />
      <HeavyList />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
setTimeout(() => document.getElementById("help")!.click(), 50);
setTimeout(() => document.getElementById("help")!.click(), 100);
// сейчас «отрисовка списка» печатается трижды, а нужно один раз

страница примера

Сначала предположите, что выведет код

Подсказку никто, кроме иконки, не читает и не меняет — поднимать её было не за чем. Состояние опускается внутрь HelpIcon, пропсы исчезают, App перестаёт перерисовываться от кликов по иконке — а с ним и список.

tsxлистинг · не запускается

function HelpIcon() {
  // состояние там, где им пользуются: клик перерисует только иконку
  const [shown, setShown] = React.useState(false);
  return (
    <button id="help" onClick={() => setShown(!shown)}>
      ? {shown ? "(нажмите, чтобы добавить товар)" : ""}
    </button>
  );
}

function App() {
  return (
    <div>
      <HelpIcon />
      <HeavyList />
    </div>
  );
}

function HelpIcon() {
  // состояние там, где им пользуются: клик перерисует только иконку
  const [shown, setShown] = React.useState(false);
  return (
    <button id="help" onClick={() => setShown(!shown)}>
      ? {shown ? "(нажмите, чтобы добавить товар)" : ""}
    </button>
  );
}

function App() {
  return (
    <div>
      <HelpIcon />
      <HeavyList />
    </div>
  );
}

Правило симметричное: поднимают, когда значение нужно кому-то ещё, и опускают, когда перестало быть нужным. Если позже подсказку понадобится закрывать из другого места — тогда и поднимете.

Подъём состояния

Видеоразбор темы за 5–7 минут

Правда в переменной модуляРефлекс из части II и почему React его не видит

Общий родительЗначение — вниз пропсом, изменение — вверх функцией

Правило, которое соседи не могут соблюсти«Открыта не больше одной» живёт у владельца набора

Почему две копии не синхронизироватьУ каждой копии свои обработчики, и дороги расходятся

Как высоко подниматьДо ближайшего общего родителя — и ни на шаг выше

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Поиск и список

Одна выбранная строка

Опустить обратно