ההוק useCallback ב-React: מתי הוא באמת עוזר

useCallback שומר ב-cache פונקציה בין רינדורים: הוא מחזיר את אותו אובייקט פונקציה עד שאחת התלויות שלו משתנה. זה משנה רק כשמשהו משווה את הפונקציה לפי הפניה, ובפועל זה אומר ילד שעטוף ב-memo או אפקט שרושם את הפונקציה כתלות.

import { memo, useCallback, useState } from 'react';

const SaveButton = memo(function SaveButton({ label, onSave }) {
    console.log('render', label);
    return <button onClick={onSave}>{label}</button>;
});

export default function App() {
    const [dark, setDark] = useState(false);
    const [saved, setSaved] = useState(0);

    const saveInline = () => setSaved((n) => n + 1);
    const saveCached = useCallback(() => setSaved((n) => n + 1), []);

    return (
        <div style={{ background: dark ? '#222' : '#fff', color: dark ? '#eee' : '#222', padding: 12 }}>
            <button onClick={() => setDark(!dark)}>Toggle theme</button>
            <SaveButton label="Inline function" onSave={saveInline} />
            <SaveButton label="useCallback" onSave={saveCached} />
            <p>Saved {saved} times</p>
        </div>
    );
}

שני הכפתורים עם memo ושניהם עושים אותו דבר. החליפו את ערכת הנושא ושימו לב ל-Console: מופיע רק render Inline function, כי saveInline היא פונקציה חדשה בכל רינדור, ולכן memo רואה prop שהשתנה. saveCached היא אותה פונקציה בכל פעם, ולכן מדלגים על הכפתור הזה.

מה הוא שומר

const cachedFn = useCallback(fn, dependencies);

• fn היא הפונקציה שרוצים לשמור. React לא קוראת לה; היא מחזירה אותה לכם.
• dependencies מפרט כל ערך מהקומפוננטה ש-fn קוראת. בכל רינדור React משווה אותם לקודמים בעזרת Object.is.
• אם שום דבר לא השתנה, מקבלים את הפונקציה מהרינדור הקודם. אם משהו השתנה, מקבלים את הפונקציה שהעברתם הפעם, ו-React שומרת אותה לפעם הבאה.

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

useCallback מול useMemo

זה אותו מנגנון. useMemo שומר ב-cache את התוצאה של קריאה לפונקציה, useCallback שומר את הפונקציה עצמה:

// These two lines are equivalent
const handleSave = useCallback(() => save(draft), [draft]);
const handleSave = useMemo(() => () => save(draft), [draft]);

השתמשו ב-useCallback לפונקציות כי זה נקרא טוב יותר, וב-useMemo לערכים מחושבים כמו רשימה מסוננת או אובייקט אפשרויות.

ויתור על תלויות עם פונקציות updater

פונקציה שמורה חייבת לרשום כל ערך state שהיא קוראת, ובכל פעם שה-state הזה משתנה, גם הפונקציה משתנה. ברשימה של שורות עם memo זו בעיה: פונקציית remove שקוראת את todos משתנה בכל פעם ש-todos משתנה, כך שכל שורה שנשארה מתרנדרת שוב אחרי כל הסרה. השתמשו בצורת ה-updater של ה-setter כדי שהפונקציה כבר לא תקרא את todos בכלל.

import { memo, useCallback, useState } from 'react';

const Row = memo(function Row({ todo, onRemove }) {
    console.log('render row', todo.text);
    return (
        <li>
            {todo.text} <button onClick={() => onRemove(todo.id)}>Remove</button>
        </li>
    );
});

export default function App() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Write tests' },
        { id: 2, text: 'Fix the bug' },
        { id: 3, text: 'Ship it' },
    ]);
    const [draft, setDraft] = useState('');

    const remove = useCallback((id) => {
        setTodos((list) => list.filter((t) => t.id !== id));
    }, []);

    return (
        <div>
            <input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder="Typing here renders no rows"
            />
            <ul>
                {todos.map((t) => (
                    <Row key={t.id} todo={t} onRemove={remove} />
                ))}
            </ul>
        </div>
    );
}

הסירו שורה: ה-Console שותק, כי שאר השורות קיבלו את אותו אובייקט todo ואת אותה פונקציית remove כמו קודם. שנו את הפונקציה ל-useCallback((id) => setTodos(todos.filter((t) => t.id !== id)), [todos]) ונסו שוב: עכשיו כל שורה שנשארה רושמת רינדור אחרי כל הסרה.

פונקציות כתלויות של אפקט

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

import { useCallback, useEffect, useState } from 'react';

function ChatRoom({ roomId }) {
    const [message, setMessage] = useState('');

    const createOptions = useCallback(() => {
        return { serverUrl: 'wss://chat.example', roomId };
    }, [roomId]);

    useEffect(() => {
        const options = createOptions();
        console.log('connect to', options.roomId);
        return () => console.log('disconnect from', options.roomId);
    }, [createOptions]);

    return (
        <input
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder={`Message #${roomId}`}
        />
    );
}

export default function App() {
    const [roomId, setRoomId] = useState('general');
    return (
        <div>
            <button onClick={() => setRoomId('general')}>general</button>
            <button onClick={() => setRoomId('random')}>random</button>
            <ChatRoom roomId={roomId} />
        </div>
    );
}

הקלדת הודעה לא מחברת מחדש. החלפת חדר רושמת ניתוק מהחדר הישן וחיבור לחדש. מחקו את עטיפת ה-useCallback (השאירו את פונקציית החץ) וכל הקשה מנתקת ומתחברת מחדש.

עם זאת, יש כאן תיקון פשוט יותר: להעביר את הפונקציה לתוך האפקט. אז האפקט תלוי ב-roomId ישירות ואף פונקציה לא צריכה להיות יציבה.

useEffect(() => {
    function createOptions() {
        return { serverUrl: 'wss://chat.example', roomId };
    }
    const options = createOptions();
    // ...
}, [roomId]);

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

לבדוק אם פונקציה השתנתה

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

import { useCallback, useEffect, useRef, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    const [step, setStep] = useState(1);

    const increment = useCallback(() => setCount((c) => c + step), [step]);

    const previous = useRef(null);
    useEffect(() => {
        if (previous.current) {
            console.log('increment changed:', previous.current !== increment);
        }
        previous.current = increment;
    });

    return (
        <div>
            <button onClick={increment}>Count: {count}</button>{' '}
            <button onClick={() => setStep(step + 1)}>Step: {step}</button>
        </div>
    );
}

לחצו על Count: ה-Console אומר increment changed: false, כי step לא השתנה. לחצו על Step והוא אומר true: step היא תלות, ולכן React החזירה את הפונקציה החדשה. פונקציה שמשתנה בכל רינדור בדרך כלל אומרת שתלות מסוימת היא עצמה חדשה בכל רינדור, כמו אובייקט או פונקציה אחרת שמוצהרים בקומפוננטה.

useCallback בהוקים מותאמים

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

function useCounter(initial = 0) {
    const [count, setCount] = useState(initial);
    const increment = useCallback(() => setCount((c) => c + 1), []);
    const reset = useCallback(() => setCount(initial), [initial]);
    return { count, increment, reset };
}

הטעות הנפוצה: לעטוף הכל

useCallback סביב handler שהולך ישר ל-<button> או ל-<input> לא עושה שום דבר מועיל. React לא חוסכת שום עבודה באלמנט DOM כי ה-handler שלו נשאר אותו דבר, וקומפוננטה שלא עטופה ב-memo מתרנדרת בכל מקרה כשההורה שלה מתרנדר.

// Pointless: <button> does not care that the function is the same
const handleClick = useCallback(() => setOpen(true), []);
return <button onClick={handleClick}>Open</button>;

כל useCallback נוסף מוסיף מערך תלויות שמישהו יכול לטעות בו, ותלות מיושנת היא באג אמיתי (הפונקציה ממשיכה לקרוא state ישן). הוסיפו אותו כשיש ילד עם memo או מערך תלויות בצד המקבל, לא כברירת מחדל.

React Compiler 1.0, כשה-build שלכם משתמש בו, עושה memoization לפונקציות ולערכים אוטומטית, מה שמבטל את הצורך ברוב הקריאות ל-useCallback שנכתבות ידנית. בלי הקומפיילר, הכללים שלמעלה עדיין חלים, ו-useCallback ידני עדיין נפוץ בקוד קיים.