Sollevare lo stato in React: stato condiviso tra componenti

Sollevare lo stato significa spostarlo dai componenti che devono condividerlo al loro genitore comune più vicino. Il genitore tiene il valore, lo passa verso il basso come prop e passa una funzione che i figli chiamano per cambiarlo, così ogni figlio si renderizza a partire da un'unica copia dello stato.

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

Clicca "Show" su un pannello qualsiasi: si apre e quello che era aperto si chiude. Può essere aperto un solo pannello alla volta perché non sono i pannelli a deciderlo da soli. App contiene openIndex, e ogni Panel riceve solo isOpen e una funzione onOpen.

Il problema: uno stato che dovrebbe concordare

Parti dalla versione più ovvia, in cui ogni pannello possiede il proprio stato isOpen. Ogni pannello funziona, ma i pannelli non sanno nulla l'uno dell'altro, quindi niente impedisce che due di loro siano aperti insieme.

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

Apri entrambi i pannelli: restano aperti insieme. Lo stato in React è privato del componente che lo dichiara, quindi un fratello non può leggerlo né azzerarlo. Quando due componenti devono concordare, lo stato deve vivere sopra entrambi.

Sollevare lo stato in tre passaggi

Trasformare il secondo esempio nel primo richiede tre modifiche.

1. Togli lo stato dal figlio. Elimina useState in Panel e leggi invece isOpen dalle props. Il figlio non decide più se è aperto.
2. Passa dal genitore il valore e un modo per cambiarlo. Panel riceve isOpen e una callback onOpen. Il figlio chiama onOpen() quando il suo pulsante viene cliccato; non sa cosa ne faccia il genitore.
3. Aggiungi lo stato al genitore comune. App dichiara openIndex e lo trasforma in props per ogni pannello: isOpen={openIndex === 1} e onOpen={() => setOpenIndex(1)}.

Il genitore comune più vicino è il componente più in basso che renderizza tutti i componenti che hanno bisogno dello stato. Qui è App. Se i pannelli stessero dentro un componente Faq, lo stato andrebbe in Faq, non più in alto.

Dopo averlo sollevato, Panel è controllato dal suo genitore nello stesso senso di un input controllato: mostra ciò che dicono le props e segnala le modifiche tramite una callback. La pagina su componenti controllati e non controllati tratta la stessa idea per gli elementi dei form.

Un'unica fonte di verità

Quando due parti dello schermo mostrano lo stesso fatto, memorizza quel fatto una sola volta e calcola tutto il resto a partire da esso. Un convertitore di temperatura è il caso classico: gli input in Celsius e Fahrenheit devono sempre concordare, quindi non possono tenere ciascuno il proprio numero.

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

Scrivi in uno dei due campi e l'altro lo segue. Lo stato è un unico fatto: il numero che l'utente ha digitato per ultimo e in quale scala. L'altro campo viene calcolato da esso durante il rendering, quindi il campo in cui stai scrivendo mantiene sempre esattamente ciò che hai digitato. Cambia lo stato iniziale in { value: '212', scale: 'f' } e il messaggio sotto gli input diventa "Water boils."

Tenere un numero in Celsius e uno in Fahrenheit in due pezzi di stato significherebbe che ogni gestore deve aggiornarli entrambi, e la prima volta che un gestore se ne dimentica, i due input non concordano più. Un unico valore memorizzato non può essere in disaccordo con se stesso.

Passare il setter verso il basso

Un figlio può cambiare lo stato del genitore solo tramite una funzione che il genitore gli dà. Puoi passare il setter stesso (onSelect={setColor}) o una funzione che fa di più (onOpen={() => setOpenIndex(1)}). Dare alla prop un nome in stile evento come onSelect o onChange, invece di setSelected, lascia il figlio all'oscuro di come il genitore memorizza il valore, così il genitore può cambiarlo in seguito senza toccare il figlio.

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 e Preview non si parlano mai. Il selettore segnala una scelta verso l'alto, App la memorizza e il nuovo valore scorre verso il basso fino a entrambi.

Quando non sollevare lo stato

Sollevare ha un costo. Quando lo stato vive in un genitore, ogni modifica renderizza il genitore e, per default, tutti i suoi figli, compresi quelli che non usano lo stato. Sollevalo solo fino al genitore comune più vicino, e lascia lo stato usato da un solo componente dentro quel componente.

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

Scrivi nella casella e guarda la console: a ogni tasto si renderizza solo SearchBox. Ora sposta query in App e passalo a SearchBox come props. A ogni tasto viene quindi registrato anche ProductList, anche se la lista non usa la query. Se la lista filtrasse per query, sollevare sarebbe la scelta giusta, perché entrambi i componenti dipenderebbero dallo stesso valore.

La domanda da porsi è "chi ha bisogno di leggere questo valore?". Se la risposta è un solo componente, lo stato resta lì. Se sono diversi, va al loro genitore comune più vicino.

Quando sollevare va troppo oltre

A volte il genitore comune più vicino è molto in alto nell'albero, e il valore deve passare attraverso diversi componenti che si limitano a inoltrarlo. Questo è il prop drilling. Qualche livello di props va bene ed è facile da seguire. Quando lo stesso valore attraversa molti livelli, o quasi ogni componente ne ha bisogno (l'utente che ha effettuato l'accesso, il tema, la lingua), leggilo con useContext invece di passarlo a mano. Il context cambia il modo in cui il valore raggiunge i figli; lo stato vive comunque in un unico genitore, quindi è comunque sollevato.