עדכון מערכים ואובייקטים ב-state של React (בלי mutation)

ב-React מעדכנים מערך או אובייקט ב-state על ידי יצירה של חדש והעברתו ל-setter. אף פעם אל תשנו את הערך הקיים במקום: השתמשו ב-spread (...), map, filter או slice כדי לבנות עותק עם השינוי שלכם, ואז קראו ל-setItems(copy).

import { useState } from 'react';

let nextId = 3;

export default function App() {
    const [items, setItems] = useState([
        { id: 1, name: 'Milk' },
        { id: 2, name: 'Bread' },
    ]);
    const [name, setName] = useState('Eggs');

    function add() {
        setItems([...items, { id: nextId++, name }]);
        setName('');
    }

    function remove(id) {
        setItems(items.filter((item) => item.id !== id));
    }

    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} />
            <button onClick={add}>Add</button>
            <ul>
                {items.map((item) => (
                    <li key={item.id}>
                        {item.name} <button onClick={() => remove(item.id)}>x</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

[...items, { ... }] הוא מערך חדש עם פריט אחד נוסף, ו-filter מחזיר מערך חדש בלי הפריט שהוסר. שניהם לא נוגעים במערך הישן.

למה mutation לא מרנדר

כשקוראים ל-setter, React משווה את הערך החדש לישן בעזרת Object.is. במערכים ובאובייקטים זה משווה הפניות, לא תוכן. אם משנים מערך עם push ומעבירים בחזרה את אותו מערך, React רואה את אותה הפניה, מחליטה ששום דבר לא השתנה, ומדלגת על הרינדור.

import { useState } from 'react';

export default function App() {
    const [items, setItems] = useState(['a']);

    function addByMutating() {
        items.push('mutated');
        setItems(items);
        console.log('pushed, length is now', items.length);
    }

    function addByCopying() {
        const next = [...items, 'copied'];
        setItems(next);
        console.log('spread: same array?', Object.is(items, next));
    }

    console.log('render', items.join(', '));

    return (
        <div>
            <button onClick={addByMutating}>push (mutates)</button>
            <button onClick={addByCopying}>spread (copies)</button>
            <p>{items.join(', ')}</p>
        </div>
    );
}

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

מערכים: מתודות לשימוש ומתודות להימנע מהן

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

toSorted, toReversed, toSpliced ו-with הן מתודות מערך חדשות יותר (ES2023), שנתמכות בכל הדפדפנים המרכזיים העדכניים מאז 2023. הן עושות את אותה עבודה כמו המקבילות שלהן שמשנות את המערך, אבל על עותק.

עדכון פריט אחד עם map

כדי לשנות פריט אחד, עשו map על המערך והחזירו אובייקט חדש עבור הפריט הרצוי, ואת האובייקט המקורי עבור כל השאר.

import { useState } from 'react';

export default function App() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Learn useState', done: true },
        { id: 2, text: 'Learn map', done: false },
        { id: 3, text: 'Build an app', done: false },
    ]);

    function toggle(id) {
        setTodos(
            todos.map((todo) =>
                todo.id === id ? { ...todo, done: !todo.done } : todo
            )
        );
    }

    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id}>
                    <button onClick={() => toggle(todo.id)}>
                        {todo.done ? 'Undo' : 'Done'}
                    </button>{' '}
                    <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                        {todo.text}
                    </span>
                </li>
            ))}
        </ul>
    );
}

החלק { ...todo, done: !todo.done } חשוב. באג נפוץ הוא להעתיק את המערך אבל לשנות את האובייקט שבתוכו:

const next = [...todos];
next[0].done = true; // next is new, but next[0] is the same object as todos[0]
setTodos(next);

זה מתרנדר, ולכן נראה תקין, אבל המערך הישן והחדש חולקים עכשיו אובייקט ששונה. כל דבר שמשווה את הפריט הישן לחדש (ילד עם React.memo, אפקט שתלוי בפריט) לא רואה הבדל. העתיקו את הפריט שאתם משנים.

הכנסה באינדקס

אין insert שלא עושה mutation, ולכן חותכים את המערך לשניים ושמים את הפריט החדש בין החצאים. toSpliced(index, 0, item) עושה את אותו דבר בקריאה אחת.

import { useState } from 'react';

export default function App() {
    const [letters, setLetters] = useState(['A', 'B', 'D', 'E']);
    const [index, setIndex] = useState(2);

    function insert() {
        const next = [
            ...letters.slice(0, index),
            'C',
            ...letters.slice(index),
        ];
        console.log('before:', letters.join(''), 'after:', next.join(''));
        setLetters(next);
    }

    return (
        <div>
            <label>
                Index{' '}
                <input
                    type="number"
                    value={index}
                    onChange={(e) => setIndex(Number(e.target.value))}
                    style={{ width: 50 }}
                />
            </label>{' '}
            <button onClick={insert}>Insert C</button>
            <p style={{ fontSize: 24, letterSpacing: 4 }}>{letters.join('')}</p>
        </div>
    );
}

קבעו את האינדקס ל-0 והכניסו שוב: ה-C החדש הולך להתחלה. החליפו את הביטוי של next ב-letters.toSpliced(index, 0, 'C') והתוצאה זהה.

מיון והיפוך

sort ו-reverse משנים את המערך שעליו קוראים להם, למרות שהם גם מחזירים אותו. זה הופך את setItems(items.sort()) ל-mutation ואחריה set עם אותה הפניה, שזה הבאג מתחילת הדף. מיינו עותק במקום.

import { useState } from 'react';

export default function App() {
    const [scores, setScores] = useState([42, 7, 19, 88, 3]);

    function sortAscending() {
        const sorted = scores.toSorted((a, b) => a - b);
        console.log('original still', scores.join(' '));
        setScores(sorted);
    }

    function reverse() {
        setScores([...scores].reverse());
    }

    return (
        <div>
            <button onClick={sortAscending}>Sort</button>
            <button onClick={reverse}>Reverse</button>
            <p>{scores.join(' ')}</p>
        </div>
    );
}

[...scores].reverse() עובד כי ה-spread יוצר את העותק קודם ו-reverse משנה אחר כך רק את העותק הזה.

עדכון אובייקטים ואובייקטים מקוננים

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

import { useState } from 'react';

export default function App() {
    const [user, setUser] = useState({
        name: 'Ada',
        address: { city: 'London', country: 'UK' },
    });

    function moveTo(city, country) {
        const next = {
            ...user,
            address: { ...user.address, city, country },
        };
        console.log('user copied:', next !== user);
        console.log('address copied:', next.address !== user.address);
        setUser(next);
    }

    return (
        <div>
            <input
                value={user.name}
                onChange={(e) => setUser({ ...user, name: e.target.value })}
            />
            <p>
                {user.name} lives in {user.address.city}, {user.address.country}.
            </p>
            <button onClick={() => moveTo('Oslo', 'Norway')}>Move to Oslo</button>
        </div>
    );
}

כל רמה שמעתיקים היא אובייקט חדש; כל רמה שלא נוגעים בה נשארת אותו אובייקט. זה מה שהופך את ה-spread לזול: אם ה-state היה מחזיק גם רשימה ארוכה של הזמנות, { ...user } היה מעתיק את ההפניה לרשימה, לא את הרשימה עצמה.

אם אובייקט ב-state מקונן שלוש או ארבע רמות לעומק ואתם כל הזמן כותבים שרשראות ארוכות של spreads, זה לעיתים קרובות סימן שה-state יכול להיות שטוח יותר. שמירת פריטים בטבלת חיפוש לפי id, או פיצול אובייקט גדול אחד לכמה קריאות useState, שומרים כל עדכון קצר. כשהרבה אירועים משנים מבנה אחד, גם reducer עוזר (ראו useReducer).

structuredClone מול spread

structuredClone(user) יוצר העתק עמוק בקריאה אחת, כך שאחר כך אפשר לשנות את העותק בחופשיות:

const next = structuredClone(user);
next.address.city = 'Oslo';
setUser(next);

זה נכון, אבל זה מעתיק את כל האובייקט בכל פעם, כולל החלקים שלא שיניתם. זה עולה זמן ב-state גדול, וזה אומר שכל אובייקט מקונן מקבל הפניה חדשה, כך שילד עם memo שמקבל את user.orders מתרנדר שוב למרות שההזמנות לא השתנו. structuredClone גם זורק שגיאה על פונקציות, ומופעים של classes חוזרים כאובייקטים רגילים. spread מעתיק רק את המסלול שמשנים, ולכן הוא הבחירה הרגילה; שמרו את structuredClone לעדכון הנדיר שבאמת כותב מחדש את רוב האובייקט.

כתיבת mutations עם Immer

Immer היא ספרייה קטנה שמאפשרת לכתוב קוד שנראה כמו mutation. היא נותנת לכם טיוטה (draft), רושמת מה אתם משנים, ומייצרת ערך immutable חדש שבו רק החלקים שהשתנו הועתקו. החבילה use-immer עוטפת אותה בהוק:

import { useImmer } from 'use-immer';

function Profile() {
    const [user, updateUser] = useImmer({
        name: 'Ada',
        address: { city: 'London' },
    });

    function moveTo(city) {
        updateUser((draft) => {
            draft.address.city = city;
        });
    }
    // ...
}

Immer לא זמינה בעורכים בדף הזה, שטוענים רק את React. כדאי להוסיף אותה כשה-state מקונן עמוק וה-spreads נהיים קשים לקריאה. ל-state שטוח, spread ו-map רגילים מספיקים, ואותם תראו ברוב קוד ה-React.