Lifting State Up di React: Berbagi State Antarkomponen

Lifting state up berarti memindahkan state dari komponen-komponen yang perlu berbagi state itu ke induk bersama terdekatnya. Induk menyimpan nilainya, mengirimnya ke bawah sebagai prop, dan mengirim fungsi yang dipanggil komponen anak untuk mengubahnya, sehingga setiap komponen anak merender dari satu salinan state yang sama.

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

Klik "Show" di panel mana pun: panel itu terbuka dan panel yang tadinya terbuka tertutup. Hanya satu panel yang bisa terbuka dalam satu waktu karena panel-panel itu tidak memutuskannya sendiri. App memegang openIndex, dan setiap Panel hanya menerima isOpen dan fungsi onOpen.

Masalahnya: state yang seharusnya sepakat

Mulai dari versi yang paling jelas, di mana setiap panel memiliki state isOpen sendiri. Setiap panel berfungsi, tetapi panel-panel itu tidak tahu apa-apa tentang satu sama lain, jadi tidak ada yang mencegah dua panel terbuka bersamaan.

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

Buka kedua panel: keduanya tetap terbuka bersamaan. State di React bersifat privat bagi komponen yang mendeklarasikannya, jadi komponen sibling tidak bisa membacanya atau mengatur ulangnya. Saat dua komponen perlu sepakat, state-nya harus tinggal di atas keduanya.

Mengangkat state dalam tiga langkah

Mengubah contoh kedua menjadi contoh pertama butuh tiga editan.

1. Hapus state dari komponen anak. Hapus useState di Panel dan baca isOpen dari props sebagai gantinya. Komponen anak tidak lagi memutuskan apakah ia terbuka.
2. Kirim nilainya dan cara mengubahnya dari induk. Panel mendapat isOpen dan callback onOpen. Komponen anak memanggil onOpen() saat tombolnya diklik; ia tidak tahu apa yang dilakukan induk dengan panggilan itu.
3. Tambahkan state ke induk bersama. App mendeklarasikan openIndex dan mengubahnya menjadi props untuk setiap panel: isOpen={openIndex === 1} dan onOpen={() => setOpenIndex(1)}.

Induk bersama terdekat adalah komponen terendah yang merender semua komponen yang membutuhkan state itu. Di sini, komponen itu adalah App. Jika panel-panelnya berada di dalam komponen Faq, state-nya akan ditaruh di Faq, bukan lebih tinggi.

Setelah diangkat, Panel dikontrol oleh induknya dalam arti yang sama dengan input terkontrol: ia menampilkan apa yang dikatakan props dan melaporkan perubahan lewat callback. Halaman tentang controlled vs uncontrolled component membahas ide yang sama untuk elemen form.

Satu sumber kebenaran

Saat dua bagian layar menampilkan fakta yang sama, simpan fakta itu sekali dan hitung semua yang lain darinya. Konverter suhu adalah contoh klasiknya: input Celsius dan Fahrenheit harus selalu sepakat, jadi keduanya tidak bisa menyimpan angkanya masing-masing.

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

Ketik di salah satu field, dan field lainnya ikut berubah. State-nya adalah satu fakta: angka yang terakhir diketik pengguna dan skala yang dipakainya. Field lainnya dihitung dari fakta itu saat render, jadi field yang sedang kamu ketik selalu menyimpan persis apa yang kamu ketik. Ganti state awalnya menjadi { value: '212', scale: 'f' }, dan pesan di bawah input berganti menjadi "Water boils."

Menyimpan angka Celsius dan angka Fahrenheit di dua state terpisah berarti setiap handler harus memperbarui keduanya, dan begitu ada satu handler yang lupa, kedua input itu tidak lagi sepakat. Satu nilai yang disimpan tidak mungkin berselisih dengan dirinya sendiri.

Mengirim setter ke bawah

Komponen anak hanya bisa mengubah state milik induk lewat fungsi yang diberikan induk. Kamu bisa mengirim setter-nya langsung (onSelect={setColor}) atau fungsi yang melakukan lebih banyak hal (onOpen={() => setOpenIndex(1)}). Memberi prop itu nama bergaya event seperti onSelect atau onChange, bukan setSelected, membuat komponen anak tidak perlu tahu bagaimana induk menyimpan nilainya, sehingga induk bisa mengubahnya nanti tanpa menyentuh komponen anak.

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 dan Preview tidak pernah berkomunikasi satu sama lain. Picker melaporkan pilihan ke atas, App menyimpannya, dan nilai baru mengalir ke bawah ke keduanya.

Kapan tidak perlu mengangkat state

Mengangkat state ada biayanya. Saat state tinggal di induk, setiap perubahan merender induk dan, secara default, semua komponen anaknya, termasuk yang tidak memakai state itu. Angkat hanya sampai induk bersama terdekat, dan biarkan state yang hanya dipakai satu komponen tetap di dalam komponen itu.

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

Ketik di kotaknya dan perhatikan konsol: hanya SearchBox yang merender di setiap ketukan tombol. Sekarang pindahkan query ke atas ke App dan kirim ke SearchBox sebagai props. Setiap ketukan tombol lalu juga mencatat ProductList, meskipun list itu tidak memakai query-nya. Jika list itu memang memfilter berdasarkan query, mengangkat state adalah keputusan yang tepat, karena kedua komponen sama-sama bergantung pada nilai yang sama.

Pertanyaan yang perlu diajukan adalah "siapa yang perlu membaca nilai ini?" Jika jawabannya satu komponen, state tetap di sana. Jika beberapa komponen, state dipindahkan ke induk bersama terdekat mereka.

Saat pengangkatan terlalu jauh

Kadang induk bersama terdekat berada jauh di atas tree, dan nilainya harus dikirim melewati beberapa komponen yang hanya meneruskannya. Itulah prop drilling. Beberapa lapisan props masih wajar dan mudah diikuti. Saat nilai yang sama berpindah melewati banyak lapisan, atau hampir setiap komponen membutuhkannya (user yang sedang login, tema, bahasa), baca dengan useContext, alih-alih mengirimnya secara manual. Context mengubah cara nilai itu sampai ke komponen anak; state-nya sendiri tetap tinggal di satu induk, jadi tetap terangkat.