Подъём состояния в React: общее состояние компонентов

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

import { useState } from 'react';

function Panel({ title, isOpen, onOpen, children }) {
    return (
        <section style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h3 style={{ margin: 0 }}>{title}</h3>
            {isOpen ? <p>{children}</p> : <button onClick={onOpen}>Show</button>}
        </section>
    );
}

export default function App() {
    const [openIndex, setOpenIndex] = useState(0);

    return (
        <div>
            <Panel title="Shipping" isOpen={openIndex === 0} onOpen={() => setOpenIndex(0)}>
                Orders ship within two days.
            </Panel>
            <Panel title="Returns" isOpen={openIndex === 1} onOpen={() => setOpenIndex(1)}>
                Return anything within 30 days.
            </Panel>
            <Panel title="Warranty" isOpen={openIndex === 2} onOpen={() => setOpenIndex(2)}>
                Two years on every product.
            </Panel>
        </div>
    );
}

Нажмите «Show» на любой панели: она откроется, а та, что была открыта, закроется. Одновременно может быть открыта только одна панель, потому что панели не решают это сами. App хранит openIndex, а каждая Panel получает только isOpen и функцию onOpen.

Проблема: состояние, которое должно совпадать

Начнём с очевидной версии, где каждая панель владеет своим состоянием isOpen. Каждая панель работает, но панели ничего не знают друг о друге, поэтому ничто не мешает двум из них быть открытыми одновременно.

import { useState } from 'react';

function Panel({ title, children }) {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <section style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h3 style={{ margin: 0 }}>{title}</h3>
            {isOpen ? <p>{children}</p> : <button onClick={() => setIsOpen(true)}>Show</button>}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="Shipping">Orders ship within two days.</Panel>
            <Panel title="Returns">Return anything within 30 days.</Panel>
        </div>
    );
}

Откройте обе панели: они останутся открытыми вместе. Состояние в React приватно для компонента, который его объявляет, поэтому сосед не может его прочитать или сбросить. Когда двум компонентам нужно согласоваться, состояние должно жить выше их обоих.

Подъём состояния за три шага

Чтобы превратить второй пример в первый, нужно три правки.

1. Уберите состояние из дочернего компонента. Удалите useState в Panel и читайте isOpen из пропсов. Дочерний компонент больше не решает, открыт ли он.
2. Передайте из родителя значение и способ его изменить. Panel получает isOpen и колбэк onOpen. Дочерний компонент вызывает onOpen(), когда нажата его кнопка; что родитель с этим делает, он не знает.
3. Добавьте состояние в общего родителя. App объявляет openIndex и превращает его в пропсы для каждой панели: isOpen={openIndex === 1} и onOpen={() => setOpenIndex(1)}.

Ближайший общий родитель это самый нижний компонент, который рендерит все компоненты, которым нужно состояние. Здесь это App. Если бы панели находились внутри компонента Faq, состояние пошло бы в Faq, а не выше.

После подъёма Panel контролируется родителем в том же смысле, что и контролируемое поле ввода: он показывает то, что говорят пропсы, и сообщает об изменениях через колбэк. Страница о контролируемых и неконтролируемых компонентах разбирает ту же идею для элементов форм.

Единственный источник истины

Когда две части экрана показывают один и тот же факт, храните этот факт один раз и вычисляйте из него всё остальное. Классический случай это конвертер температуры: поля Цельсия и Фаренгейта всегда должны совпадать, поэтому каждое не может хранить своё число.

import { useState } from 'react';

const round = (n) => Math.round(n * 10) / 10;
const toF = (c) => round((c * 9) / 5 + 32);
const toC = (f) => round(((f - 32) * 5) / 9);

function TemperatureInput({ label, value, onChange }) {
    return (
        <label style={{ display: 'block', marginBottom: 8 }}>
            {label}{' '}
            <input
                type="number"
                value={value}
                onChange={(e) => onChange(e.target.value)}
                style={{ width: 80 }}
            />
        </label>
    );
}

export default function App() {
    const [temp, setTemp] = useState({ value: '20', scale: 'c' });

    const number = Number(temp.value);
    const empty = temp.value === '';
    const celsius = temp.scale === 'c' || empty ? temp.value : toC(number);
    const fahrenheit = temp.scale === 'f' || empty ? temp.value : toF(number);

    return (
        <div>
            <TemperatureInput
                label="Celsius"
                value={celsius}
                onChange={(value) => setTemp({ value, scale: 'c' })}
            />
            <TemperatureInput
                label="Fahrenheit"
                value={fahrenheit}
                onChange={(value) => setTemp({ value, scale: 'f' })}
            />
            <p>{Number(celsius) >= 100 ? 'Water boils.' : 'Water does not boil.'}</p>
        </div>
    );
}

Пишите в любое поле, и другое последует за ним. Состояние это один факт: число, которое пользователь ввёл последним, и шкала, в которой оно было. Другое поле вычисляется из него во время рендера, поэтому поле, в котором вы печатаете, всегда хранит ровно то, что вы ввели. Замените начальное состояние на { value: '212', scale: 'f' }, и сообщение под полями сменится на «Water boils.»

Хранить число по Цельсию и число по Фаренгейту в двух значениях состояния означало бы, что каждый обработчик должен обновлять оба, и в первый же раз, когда один обработчик забудет, поля разойдутся. Одно сохранённое значение не может противоречить самому себе.

Передача сеттера вниз

Дочерний компонент может изменить состояние родителя только через функцию, которую родитель ему даёт. Можно передать сам сеттер (onSelect={setColor}) или функцию, которая делает больше (onOpen={() => setOpenIndex(1)}). Если дать пропсу имя в стиле события, например onSelect или onChange, а не setSelected, дочерний компонент не будет знать, как родитель хранит значение, и родитель сможет позже это изменить, не трогая дочерний.

import { useState } from 'react';

function ColorPicker({ colors, selected, onSelect }) {
    return (
        <div>
            {colors.map((c) => (
                <button
                    key={c}
                    onClick={() => onSelect(c)}
                    style={{ background: c, color: 'white', border: selected === c ? '3px solid black' : 'none', marginInlineEnd: 4 }}
                >
                    {c}
                </button>
            ))}
        </div>
    );
}

function Preview({ color }) {
    return <p style={{ color, fontSize: 24, fontWeight: 700 }}>Hello in {color}</p>;
}

export default function App() {
    const [color, setColor] = useState('teal');

    function handleSelect(c) {
        console.log('App sets color to', c);
        setColor(c);
    }

    return (
        <div>
            <ColorPicker colors={['teal', 'tomato', 'slateblue']} selected={color} onSelect={handleSelect} />
            <Preview color={color} />
        </div>
    );
}

ColorPicker и Preview никогда не общаются друг с другом. Палитра сообщает о выборе наверх, App его сохраняет, и новое значение течёт вниз к обоим.

Когда не поднимать состояние

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

import { useState } from 'react';

function SearchBox() {
    const [query, setQuery] = useState('');
    console.log('render SearchBox');
    return <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Type here" />;
}

function ProductList() {
    console.log('render ProductList');
    return (
        <ul>
            <li>Keyboard</li>
            <li>Mouse</li>
        </ul>
    );
}

export default function App() {
    return (
        <div>
            <SearchBox />
            <ProductList />
        </div>
    );
}

Пишите в поле и смотрите в консоль: при каждом нажатии клавиши рендерится только SearchBox. Теперь перенесите query в App и передайте его в SearchBox пропсами. Тогда каждое нажатие клавиши выводит ещё и ProductList, хотя списку запрос не нужен. Если бы список фильтровался по запросу, подъём был бы правильным решением, ведь тогда оба компонента зависели бы от одного значения.

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

Когда подъём заходит слишком далеко

Иногда ближайший общий родитель находится далеко вверху дерева, и значение приходится передавать через несколько компонентов, которые только передают его дальше. Это prop drilling. Несколько уровней пропсов это нормально и легко отслеживается. Когда одно и то же значение проходит через много уровней или оно нужно почти каждому компоненту (вошедший пользователь, тема, язык), читайте его через useContext, а не передавайте вручную. Контекст меняет то, как значение доходит до детей; само состояние по-прежнему живёт в одном родителе, так что оно всё равно поднято.