הרמת state למעלה ב-React: שיתוף state בין קומפוננטות

הרמת state למעלה (lifting state up) פירושה להוציא state מהקומפוננטות שצריכות לשתף אותו ולהעביר אותו להורה המשותף הקרוב ביותר שלהן. ההורה מחזיק את הערך, מעביר אותו מטה כ-prop, ומעביר פונקציה שהילדים קוראים לה כדי לשנות אותו, כך שכל ילד מתרנדר מעותק אחד של ה-state.

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

לחצו על "Show" באחד הפאנלים: הוא נפתח והפאנל שהיה פתוח נסגר. רק פאנל אחד יכול להיות פתוח בכל רגע כי הפאנלים לא מחליטים על זה בעצמם. App מחזיקה את openIndex, וכל Panel מקבל רק את isOpen ופונקציית onOpen.

הבעיה: state שצריך להסכים

התחילו מהגרסה המתבקשת, שבה כל פאנל מחזיק state isOpen משלו. כל פאנל עובד, אבל הפאנלים לא יודעים כלום זה על זה, כך ששום דבר לא מונע משניים מהם להיות פתוחים יחד.

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

פתחו את שני הפאנלים: הם נשארים פתוחים יחד. state ב-React פרטי לקומפוננטה שמצהירה עליו, ולכן אח לא יכול לקרוא אותו או לאפס אותו. כששתי קומפוננטות צריכות להסכים, ה-state צריך לחיות מעל שתיהן.

הרמת state בשלושה צעדים

הפיכת הדוגמה השנייה לראשונה דורשת שלוש עריכות.

1. הסירו את ה-state מהילד. מחקו את useState ב-Panel וקראו את isOpen מ-props במקום. הילד כבר לא מחליט אם הוא פתוח.
2. העבירו מההורה את הערך ודרך לשנות אותו. Panel מקבל את isOpen ו-callback בשם onOpen. הילד קורא ל-onOpen() כשלוחצים על הכפתור שלו; הוא לא יודע מה ההורה עושה עם זה.
3. הוסיפו את ה-state להורה המשותף. App מצהירה על openIndex והופכת אותו ל-props לכל פאנל: isOpen={openIndex === 1} ו-onOpen={() => setOpenIndex(1)}.

ההורה המשותף הקרוב ביותר הוא הקומפוננטה הנמוכה ביותר שמרנדרת את כל הקומפוננטות שצריכות את ה-state. כאן זו App. אם הפאנלים היו יושבים בתוך קומפוננטת Faq, ה-state היה הולך ל-Faq, לא גבוה יותר.

אחרי ההרמה, Panel נשלט על ידי ההורה שלו באותו מובן כמו שדה מבוקר: הוא מציג את מה שה-props אומרים ומדווח על שינויים דרך callback. הדף על קומפוננטות מבוקרות מול לא מבוקרות מכסה את אותו רעיון עבור אלמנטי טופס.

מקור אמת יחיד

כששני חלקים במסך מציגים את אותה עובדה, שמרו את העובדה הזו פעם אחת וחשבו ממנה את כל השאר. ממיר טמפרטורות הוא המקרה הקלאסי: שדות הצלזיוס והפרנהייט חייבים תמיד להסכים, ולכן אסור שכל אחד יחזיק מספר משלו.

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

הקלידו באחד השדות והשני עוקב. ה-state הוא עובדה אחת: המספר שהמשתמש הקליד אחרון ובאיזו סקאלה. השדה השני מחושב ממנו בזמן הרינדור, כך שהשדה שבו אתם מקלידים תמיד שומר בדיוק את מה שהקלדתם. שנו את ה-state ההתחלתי ל-{ value: '212', scale: 'f' } וההודעה מתחת לשדות מתחלפת ל-"Water boils.".

החזקה של מספר צלזיוס ומספר פרנהייט בשני חלקי state הייתה אומרת שכל handler צריך לעדכן את שניהם, ובפעם הראשונה ש-handler שוכח, שני השדות לא מסכימים. ערך שמור אחד לא יכול לא להסכים עם עצמו.

העברת ה-setter מטה

ילד יכול לשנות את ה-state של ההורה רק דרך פונקציה שההורה נותן לו. אפשר להעביר את ה-setter עצמו (onSelect={setColor}) או פונקציה שעושה יותר (onOpen={() => setOpenIndex(1)}). מתן שם בסגנון אירוע ל-prop, כמו onSelect או onChange, במקום setSelected, משאיר את הילד לא מודע לאופן שבו ההורה שומר את הערך, כך שההורה יכול לשנות את זה אחר כך בלי לגעת בילד.

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 ו-Preview אף פעם לא מדברות זו עם זו. הבורר מדווח למעלה על בחירה, App שומרת אותה, והערך החדש זורם מטה לשתיהן.

מתי לא להרים state

להרמה יש מחיר. כש-state חי בהורה, כל שינוי מרנדר את ההורה, וכברירת מחדל את כל הילדים שלו, כולל אלה שלא משתמשים ב-state. הרימו רק עד ההורה המשותף הקרוב ביותר, והשאירו state שרק קומפוננטה אחת משתמשת בו בתוך הקומפוננטה הזו.

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

הקלידו בתיבה ושימו לב לקונסול: רק SearchBox מתרנדרת בכל הקשה. עכשיו העבירו את query למעלה ל-App והעבירו אותו ל-SearchBox כ-props. אז כל הקשה רושמת גם את ProductList, למרות שהרשימה לא משתמשת בשאילתה. אם הרשימה הייתה מסננת לפי השאילתה, ההרמה הייתה ההחלטה הנכונה, כי אז שתי הקומפוננטות היו תלויות באותו ערך.

השאלה שצריך לשאול היא "מי צריך לקרוא את הערך הזה?". אם התשובה היא קומפוננטה אחת, ה-state נשאר שם. אם כמה, הוא הולך להורה המשותף הקרוב ביותר שלהן.

כשההרמה מגזימה

לפעמים ההורה המשותף הקרוב ביותר נמצא גבוה בעץ, והערך צריך לעבור דרך כמה קומפוננטות שרק מעבירות אותו הלאה. זה prop drilling. כמה שכבות של props זה בסדר וקל לעקוב. כשאותו ערך עובר דרך הרבה שכבות, או שכמעט כל קומפוננטה צריכה אותו (המשתמש המחובר, ערכת הנושא, השפה), קראו אותו עם useContext במקום להעביר אותו ידנית. קונטקסט משנה את הדרך שבה הערך מגיע לילדים; ה-state עצמו עדיין חי בהורה אחד, כך שהוא עדיין מורם.