State nach oben verlagern in React: State teilen

State nach oben verlagern heißt, State aus den Komponenten, die ihn teilen müssen, in ihr nächstes gemeinsames Elternteil zu verschieben. Das Elternteil hält den Wert, reicht ihn als Prop nach unten und übergibt eine Funktion, die die Kinder aufrufen, um ihn zu ändern, also rendert jedes Kind aus einer Kopie des States.

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>
    );
}

Klicke bei einem beliebigen Panel auf „Show“: Es öffnet sich, und das bisher offene schließt sich. Es kann immer nur ein Panel offen sein, weil die Panels das nicht selbst entscheiden. App hält openIndex, und jedes Panel bekommt nur isOpen und eine Funktion onOpen.

Das Problem: State, der übereinstimmen soll

Beginne mit der naheliegenden Version, in der jedes Panel seinen eigenen State isOpen besitzt. Jedes Panel funktioniert, aber die Panels wissen nichts voneinander, also hindert nichts zwei von ihnen daran, gleichzeitig offen zu sein.

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>
    );
}

Öffne beide Panels: Sie bleiben zusammen offen. State ist in React privat für die Komponente, die ihn deklariert, also kann ein Geschwister ihn weder lesen noch zurücksetzen. Wenn zwei Komponenten übereinstimmen müssen, muss der State über beiden leben.

State in drei Schritten nach oben verlagern

Aus dem zweiten Beispiel das erste zu machen braucht drei Änderungen.

1. Entferne den State aus dem Kind. Lösch useState in Panel und lies isOpen stattdessen aus den Props. Das Kind entscheidet nicht mehr, ob es offen ist.
2. Übergib vom Elternteil den Wert und einen Weg, ihn zu ändern. Panel bekommt isOpen und einen Callback onOpen. Das Kind ruft onOpen() auf, wenn sein Button geklickt wird; was das Elternteil damit macht, weiß es nicht.
3. Füge den State dem gemeinsamen Elternteil hinzu. App deklariert openIndex und macht daraus Props für jedes Panel: isOpen={openIndex === 1} und onOpen={() => setOpenIndex(1)}.

Das nächste gemeinsame Elternteil ist die tiefste Komponente, die alle Komponenten rendert, die den State brauchen. Hier ist das App. Säßen die Panels in einer Komponente Faq, käme der State in Faq, nicht höher.

Nach dem Verlagern wird Panel von seinem Elternteil kontrolliert, im selben Sinn wie ein kontrolliertes Input: Es zeigt, was die Props sagen, und meldet Änderungen über einen Callback. Die Seite zu kontrollierten vs. unkontrollierten Komponenten behandelt dieselbe Idee für Formularelemente.

Eine einzige Quelle der Wahrheit

Wenn zwei Teile des Bildschirms dieselbe Tatsache zeigen, speichere diese Tatsache einmal und berechne alles andere daraus. Ein Temperaturumrechner ist der klassische Fall: Die Inputs für Celsius und Fahrenheit müssen immer übereinstimmen, also können sie nicht jeweils ihre eigene Zahl halten.

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>
    );
}

Tippe in eines der Felder, und das andere folgt. Der State ist eine Tatsache: die zuletzt getippte Zahl und in welcher Skala sie war. Das andere Feld wird beim Rendern daraus berechnet, also behält das Feld, in das du tippst, immer genau das, was du getippt hast. Ändere den Start-State zu { value: '212', scale: 'f' }, und die Meldung unter den Inputs wechselt zu „Water boils.“

Eine Celsius-Zahl und eine Fahrenheit-Zahl in zwei State-Werten zu halten würde bedeuten, dass jeder Handler beide aktualisieren muss, und sobald ein Handler es einmal vergisst, stimmen die beiden Inputs nicht mehr überein. Ein einziger gespeicherter Wert kann sich nicht selbst widersprechen.

Den Setter nach unten reichen

Ein Kind kann den State des Elternteils nur über eine Funktion ändern, die das Elternteil ihm gibt. Du kannst den Setter selbst übergeben (onSelect={setColor}) oder eine Funktion, die mehr tut (onOpen={() => setOpenIndex(1)}). Gibst du der Prop einen Namen im Event-Stil wie onSelect oder onChange statt setSelected, weiß das Kind nicht, wie das Elternteil den Wert speichert, also kann das Elternteil das später ändern, ohne das Kind anzufassen.

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 und Preview reden nie miteinander. Der Picker meldet eine Auswahl nach oben, App speichert sie, und der neue Wert fließt zu beiden nach unten.

Wann du State nicht verlagern solltest

Verlagern hat seinen Preis. Wenn State in einem Elternteil lebt, rendert jede Änderung das Elternteil und standardmäßig alle seine Kinder, auch die, die den State nicht nutzen. Verlagere nur bis zum nächsten gemeinsamen Elternteil und lass State, den nur eine Komponente nutzt, in dieser Komponente.

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>
    );
}

Tippe in das Feld und beobachte die Konsole: Nur SearchBox rendert bei jedem Tastendruck. Verschiebe jetzt query nach oben in App und übergib es SearchBox als Props. Dann loggt jeder Tastendruck auch ProductList, obwohl die Liste die Suche nicht nutzt. Würde die Liste nach der Suche filtern, wäre Verlagern die richtige Entscheidung, weil dann beide Komponenten vom selben Wert abhängen.

Die Frage ist: „Wer muss diesen Wert lesen?“ Lautet die Antwort eine Komponente, bleibt der State dort. Sind es mehrere, kommt er in ihr nächstes gemeinsames Elternteil.

Wenn das Verlagern zu weit geht

Manchmal liegt das nächste gemeinsame Elternteil weit oben im Baum, und der Wert muss durch mehrere Komponenten gereicht werden, die ihn nur weitergeben. Das ist Prop Drilling. Ein paar Ebenen mit Props sind in Ordnung und leicht nachzuvollziehen. Wenn derselbe Wert durch viele Ebenen wandert oder fast jede Komponente ihn braucht (der angemeldete Nutzer, das Theme, die Sprache), lies ihn mit useContext, statt ihn von Hand weiterzureichen. Context ändert, wie der Wert die Kinder erreicht; der State selbst lebt weiterhin in einem Elternteil, ist also weiterhin nach oben verlagert.