Lifting state up trong React: chia sẻ state giữa component

Lifting state up nghĩa là chuyển state ra khỏi các component cần dùng chung nó và đặt vào component cha chung gần nhất. Component cha giữ giá trị, truyền nó xuống dưới dạng prop, kèm theo một hàm để các component con gọi khi muốn thay đổi, nhờ vậy mọi component con đều render từ một bản state duy nhất.

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

Nhấn "Show" trên bất kỳ panel nào: panel đó mở ra và panel đang mở sẽ đóng lại. Mỗi lúc chỉ mở được một panel vì các panel không tự quyết định điều đó. App giữ openIndex, còn mỗi Panel chỉ nhận isOpen và một hàm onOpen.

Vấn đề: state cần thống nhất với nhau

Bắt đầu từ cách làm hiển nhiên nhất, trong đó mỗi panel tự sở hữu state isOpen của mình. Từng panel đều chạy được, nhưng chúng không biết gì về nhau, nên chẳng có gì ngăn hai panel cùng mở một lúc.

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

Mở cả hai panel: chúng cùng mở. State trong React là riêng tư của component khai báo nó, nên component anh em không thể đọc hay đặt lại. Khi hai component cần thống nhất với nhau, state phải nằm ở phía trên cả hai.

Lifting state trong ba bước

Để biến ví dụ thứ hai thành ví dụ đầu tiên, bạn cần sửa ba chỗ.

1. Bỏ state khỏi component con. Xóa useState trong Panel và đọc isOpen từ props. Component con không còn tự quyết định mình có đang mở hay không.
2. Truyền giá trị và cách thay đổi nó từ component cha. Panel nhận isOpen và một callback onOpen. Component con gọi onOpen() khi nút của nó được nhấn; nó không biết component cha sẽ làm gì với lời gọi đó.
3. Thêm state vào component cha chung. App khai báo openIndex và chuyển nó thành props cho từng panel: isOpen={openIndex === 1} và onOpen={() => setOpenIndex(1)}.

Component cha chung gần nhất là component thấp nhất render tất cả các component cần đến state. Ở đây đó là App. Nếu các panel nằm trong một component Faq, state sẽ đặt ở Faq, chứ không cao hơn.

Sau khi lift, Panel được component cha điều khiển theo đúng nghĩa của một controlled input: nó hiển thị những gì props nói và báo thay đổi qua một callback. Trang về controlled và uncontrolled component trình bày cùng ý tưởng này cho các phần tử form.

Một nguồn dữ liệu duy nhất

Khi hai phần của màn hình hiển thị cùng một sự thật, hãy lưu sự thật đó một lần và tính mọi thứ còn lại từ nó. Bộ chuyển đổi nhiệt độ là ví dụ kinh điển: ô độ C và ô độ F phải luôn khớp nhau, nên chúng không thể mỗi ô giữ một con số riêng.

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

Gõ vào ô nào thì ô còn lại cũng thay đổi theo. State chỉ là một sự thật: con số người dùng gõ gần nhất và thang đo của nó. Ô còn lại được tính từ đó trong lúc render, nên ô bạn đang gõ luôn giữ đúng những gì bạn gõ. Đổi state ban đầu thành { value: '212', scale: 'f' }, dòng thông báo bên dưới các ô sẽ chuyển thành "Water boils."

Giữ số độ C và số độ F trong hai state riêng nghĩa là mọi handler đều phải cập nhật cả hai, và chỉ cần một handler quên, hai ô sẽ lệch nhau. Một giá trị duy nhất thì không thể tự mâu thuẫn với chính nó.

Truyền hàm cập nhật xuống dưới

Component con chỉ thay đổi được state của cha thông qua một hàm mà cha đưa cho nó. Bạn có thể truyền thẳng hàm set (onSelect={setColor}) hoặc một hàm làm nhiều việc hơn (onOpen={() => setOpenIndex(1)}). Đặt tên prop theo kiểu sự kiện như onSelect hay onChange, thay vì setSelected, giúp component con không cần biết cha lưu giá trị ra sao, nhờ đó sau này cha có thể đổi cách lưu mà không phải động đến con.

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 và Preview không bao giờ nói chuyện trực tiếp với nhau. Bộ chọn màu báo lựa chọn lên trên, App lưu lại, và giá trị mới chảy xuống cả hai.

Khi nào không nên lift state

Lift state có cái giá của nó. Khi state nằm ở component cha, mỗi thay đổi sẽ khiến cha render lại và theo mặc định là cả mọi component con, kể cả những component không dùng state đó. Chỉ lift đến component cha chung gần nhất, và để state chỉ một component dùng nằm yên trong component đó.

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

Gõ vào ô và theo dõi console: mỗi lần gõ phím chỉ có SearchBox render. Giờ hãy chuyển query lên App và truyền nó xuống SearchBox qua props. Khi đó mỗi lần gõ phím đều log thêm ProductList, dù danh sách không hề dùng đến query. Nếu danh sách thật sự lọc theo query, lift state lại là lựa chọn đúng, vì lúc đó cả hai component đều phụ thuộc vào cùng một giá trị.

Câu hỏi cần đặt ra là "ai cần đọc giá trị này?" Nếu câu trả lời là một component, state ở lại đó. Nếu là nhiều component, nó được đưa lên component cha chung gần nhất của chúng.

Khi lift quá đà

Đôi khi component cha chung gần nhất nằm rất cao trên cây, và giá trị phải đi qua nhiều component chỉ để chuyền tiếp. Đó là prop drilling. Vài tầng props thì không sao và vẫn dễ theo dõi. Khi cùng một giá trị đi qua rất nhiều tầng, hoặc gần như component nào cũng cần nó (người dùng đang đăng nhập, theme, ngôn ngữ), hãy đọc nó bằng useContext thay vì tự truyền tay. Context thay đổi cách giá trị đến được các component con; bản thân state vẫn nằm ở một component cha, nên nó vẫn được lift.