Faire remonter l'état en React : partager l'état

Faire remonter l'état consiste à sortir l'état des composants qui doivent le partager pour le placer dans leur parent commun le plus proche. Le parent garde la valeur, la redescend en prop, et passe une fonction que les enfants appellent pour la modifier : chaque enfant fait ainsi son rendu à partir d'une seule copie de l'état.

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

Cliquez sur "Show" dans n'importe quel panneau : il s'ouvre et celui qui était ouvert se ferme. Un seul panneau peut être ouvert à la fois parce que les panneaux n'en décident pas eux-mêmes. App détient openIndex, et chaque Panel reçoit seulement isOpen et une fonction onOpen.

Le problème : un état qui doit concorder

Partez de la version évidente, où chaque panneau possède son propre état isOpen. Chaque panneau fonctionne, mais les panneaux ne savent rien les uns des autres, donc rien n'empêche deux d'entre eux d'être ouverts en même temps.

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

Ouvrez les deux panneaux : ils restent ouverts ensemble. Dans React, l'état est privé au composant qui le déclare, un composant frère ne peut donc ni le lire ni le réinitialiser. Quand deux composants doivent concorder, l'état doit vivre au-dessus des deux.

Faire remonter l'état en trois étapes

Transformer le deuxième exemple en premier demande trois modifications.

1. Retirez l'état de l'enfant. Supprimez useState dans Panel et lisez plutôt isOpen depuis les props. L'enfant ne décide plus s'il est ouvert.
2. Passez depuis le parent la valeur et un moyen de la modifier. Panel reçoit isOpen et un callback onOpen. L'enfant appelle onOpen() quand on clique sur son bouton ; il ignore ce que le parent en fait.
3. Ajoutez l'état au parent commun. App déclare openIndex et le transforme en props pour chaque panneau : isOpen={openIndex === 1} et onOpen={() => setOpenIndex(1)}.

Le parent commun le plus proche est le composant le plus bas qui affiche tous les composants ayant besoin de l'état. Ici, c'est App. Si les panneaux se trouvaient dans un composant Faq, l'état irait dans Faq, pas plus haut.

Après la remontée, Panel est contrôlé par son parent au même sens qu'un champ contrôlé : il affiche ce que disent les props et signale les changements par un callback. La page sur les composants contrôlés et non contrôlés traite de la même idée pour les éléments de formulaire.

Une source unique de vérité

Quand deux parties de l'écran affichent le même fait, stockez ce fait une seule fois et calculez tout le reste à partir de lui. Un convertisseur de température est le cas classique : les champs Celsius et Fahrenheit doivent toujours concorder, ils ne peuvent donc pas garder chacun leur propre nombre.

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

Tapez dans l'un ou l'autre champ et l'autre suit. L'état est un seul fait : le nombre que l'utilisateur a tapé en dernier et l'échelle dans laquelle il l'a tapé. L'autre champ est calculé à partir de lui pendant le rendu, donc le champ dans lequel vous tapez garde toujours exactement ce que vous avez tapé. Remplacez l'état de départ par { value: '212', scale: 'f' } et le message sous les champs devient "Water boils."

Garder un nombre en Celsius et un nombre en Fahrenheit dans deux éléments d'état obligerait chaque gestionnaire à mettre à jour les deux, et la première fois qu'un gestionnaire oublie, les deux champs se contredisent. Une seule valeur stockée ne peut pas se contredire elle-même.

Passer le setter vers le bas

Un enfant ne peut modifier l'état du parent qu'au moyen d'une fonction que le parent lui donne. Vous pouvez passer le setter lui-même (onSelect={setColor}) ou une fonction qui en fait plus (onOpen={() => setOpenIndex(1)}). Donner à la prop un nom de type événement comme onSelect ou onChange, plutôt que setSelected, laisse l'enfant ignorer comment le parent stocke la valeur, et le parent peut donc changer cela plus tard sans toucher à l'enfant.

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 et Preview ne communiquent jamais directement. Le sélecteur signale un choix vers le haut, App le stocke, et la nouvelle valeur redescend vers les deux.

Quand ne pas faire remonter l'état

Faire remonter l'état a un coût. Quand l'état vit dans un parent, chaque changement fait refaire un rendu au parent et, par défaut, à tous ses enfants, y compris ceux qui n'utilisent pas l'état. Ne remontez pas plus haut que le parent commun le plus proche, et laissez dans un composant l'état que lui seul utilise.

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

Tapez dans le champ et regardez la console : seul SearchBox refait un rendu à chaque frappe. Déplacez maintenant query dans App et passez-le à SearchBox en props. Chaque frappe affiche alors aussi ProductList, même si la liste n'utilise pas la recherche. Si la liste filtrait selon la recherche, faire remonter l'état serait le bon choix, puisque les deux composants dépendraient alors de la même valeur.

La question à se poser est « qui a besoin de lire cette valeur ? ». Si la réponse est un seul composant, l'état reste là. Si c'est plusieurs, il va dans leur parent commun le plus proche.

Quand la remontée va trop loin

Parfois, le parent commun le plus proche est très haut dans l'arbre, et la valeur doit traverser plusieurs composants qui ne font que la transmettre. C'est le prop drilling. Quelques couches de props, c'est très bien et facile à suivre. Quand la même valeur traverse de nombreuses couches, ou que presque tous les composants en ont besoin (l'utilisateur connecté, le thème, la langue), lisez-la avec useContext au lieu de la passer à la main. Le contexte change la façon dont la valeur atteint les enfants ; l'état lui-même vit toujours dans un seul parent, il est donc toujours remonté.