Elevar o estado no React: compartilhar entre componentes

Elevar o estado significa tirar o estado dos componentes que precisam compartilhá-lo e levá-lo para o pai comum mais próximo deles. O pai guarda o valor, passa-o para baixo como prop e passa uma função que os filhos chamam para mudá-lo, de modo que todos os filhos renderizam a partir de uma única cópia do estado.

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

Clique em "Show" em qualquer painel: ele abre e o que estava aberto fecha. Só um painel pode ficar aberto por vez porque os painéis não decidem isso sozinhos. App guarda openIndex, e cada Panel só recebe isOpen e uma função onOpen.

O problema: estado que precisa concordar

Comece pela versão óbvia, em que cada painel é dono do próprio estado isOpen. Cada painel funciona, mas os painéis não sabem nada uns dos outros, então nada impede que dois deles fiquem abertos ao mesmo tempo.

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

Abra os dois painéis: eles ficam abertos juntos. O estado no React é privado do componente que o declara, então um irmão não consegue lê-lo nem reiniciá-lo. Quando dois componentes precisam concordar, o estado tem que morar acima dos dois.

Elevando o estado em três passos

Transformar o segundo exemplo no primeiro leva três edições.

1. Remova o estado do filho. Apague o useState em Panel e leia isOpen das props. O filho não decide mais se está aberto.
2. Passe do pai o valor e uma forma de mudá-lo. Panel recebe isOpen e um callback onOpen. O filho chama onOpen() quando o botão dele é clicado; ele não sabe o que o pai faz com isso.
3. Adicione o estado ao pai em comum. App declara openIndex e o transforma em props para cada painel: isOpen={openIndex === 1} e onOpen={() => setOpenIndex(1)}.

O pai comum mais próximo é o componente mais baixo que renderiza todos os componentes que precisam do estado. Aqui é App. Se os painéis estivessem dentro de um componente Faq, o estado iria para Faq, não mais para cima.

Depois da elevação, Panel é controlado pelo pai no mesmo sentido de um input controlado: ele mostra o que as props dizem e informa mudanças por um callback. A página sobre componentes controlados vs não controlados trata da mesma ideia para elementos de formulário.

Uma fonte única da verdade

Quando duas partes da tela mostram o mesmo fato, guarde esse fato uma vez e calcule todo o resto a partir dele. Um conversor de temperatura é o caso clássico: os inputs de Celsius e Fahrenheit precisam sempre concordar, então não podem cada um guardar o próprio número.

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

Digite em qualquer um dos campos e o outro acompanha. O estado é um fato só: o número que o usuário digitou por último e em qual escala estava. O outro campo é calculado a partir dele durante a renderização, então o campo em que você está digitando sempre mantém exatamente o que você digitou. Troque o estado inicial por { value: '212', scale: 'f' } e a mensagem abaixo dos inputs muda para "Water boils."

Guardar um número em Celsius e outro em Fahrenheit em duas partes de estado significaria que todo handler precisa atualizar os dois, e na primeira vez que um handler esquecer, os dois inputs discordam. Um único valor guardado não consegue discordar de si mesmo.

Passando o setter para baixo

Um filho só consegue mudar o estado do pai por meio de uma função que o pai lhe dá. Você pode passar o próprio setter (onSelect={setColor}) ou uma função que faz mais coisas (onOpen={() => setOpenIndex(1)}). Dar à prop um nome no estilo de evento como onSelect ou onChange, em vez de setSelected, mantém o filho sem saber como o pai guarda o valor, e assim o pai pode mudar isso depois sem mexer no filho.

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 nunca conversam entre si. O seletor informa uma escolha para cima, App a guarda, e o novo valor desce para os dois.

Quando não elevar o estado

Elevar tem um custo. Quando o estado mora em um pai, toda mudança renderiza o pai e, por padrão, todos os filhos dele, inclusive os que não usam o estado. Eleve só até o pai comum mais próximo e deixe o estado que só um componente usa dentro desse 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>
    );
}

Digite na caixa e observe o console: só SearchBox renderiza a cada tecla. Agora mova query para cima, para App, e passe-o para SearchBox como props. Cada tecla passa então a registrar também ProductList, mesmo que a lista não use a busca. Se a lista filtrasse pela busca, elevar seria a decisão certa, já que os dois componentes dependeriam do mesmo valor.

A pergunta a fazer é "quem precisa ler este valor?" Se a resposta é um componente, o estado fica nele. Se são vários, ele vai para o pai comum mais próximo deles.

Quando a elevação vai longe demais

Às vezes o pai comum mais próximo fica bem alto na árvore, e o valor precisa passar por vários componentes que só o repassam. Isso é prop drilling. Algumas camadas de props não são problema e são fáceis de acompanhar. Quando o mesmo valor atravessa muitas camadas, ou quase todo componente precisa dele (o usuário logado, o tema, o idioma), leia-o com useContext em vez de passá-lo à mão. O context muda como o valor chega aos filhos; o estado em si continua morando em um pai, então continua elevado.