כללי ההוקים ב-React: למה הסדר חשוב, ואיך מתקנים

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

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

import { useState } from 'react';

const slots = [];
let index = 0;

function toyUseState(initial) {
    const i = index++;
    if (!(i in slots)) slots[i] = initial;
    return [slots[i]];
}

function renderForm(showNickname) {
    index = 0;
    const [name] = toyUseState('Ada');
    let nickname = '(no hook called)';
    if (showNickname) {
        [nickname] = toyUseState('Countess');
    }
    const [age] = toyUseState(36);
    return { name, nickname, age };
}

export default function App() {
    const [result, setResult] = useState(() => renderForm(true));
    return (
        <div>
            <button onClick={() => setResult(renderForm(true))}>Render with nickname</button>{' '}
            <button onClick={() => setResult(renderForm(false))}>Render without nickname</button>
            <p>
                name: {String(result.name)}, nickname: {String(result.nickname)}, age:{' '}
                {String(result.age)}
            </p>
            <p style={{ color: '#666' }}>slots: {JSON.stringify(slots)}</p>
        </div>
    );
}

הרינדור הראשון ממלא שלושה מקומות: Ada, Countess, 36. לחצו על "Render without nickname": הקריאה המותנית מדולגת, ולכן הקריאה של age לוקחת את מקום 1 וקוראת Countess. React האמיתית שמה לב לאי ההתאמה בחלק מהמקרים וזורקת שגיאה, ובאחרים מעבירה את הערך הלא נכון להוק הלא נכון, מה שגרוע יותר. העבירו את הקריאה toyUseState('Countess') אל מעל ה-if ושני הכפתורים נותנים את הגיל הנכון.

שני הכללים בקוד

function Profile({ user }) {
    // Good: always called, always in this order
    const [tab, setTab] = useState('posts');
    const theme = useContext(ThemeContext);
    useEffect(() => {
        document.title = user.name;
    }, [user.name]);

    // Bad: inside a condition, a loop or a nested function
    if (user.isAdmin) {
        const [log, setLog] = useState([]); // breaks the order
    }
}

קריאה להוק שתמיד מגיעים אליה, באותו סדר, בסדר בכל מקום בגוף הקומפוננטה, כל עוד היא באה לפני כל return מוקדם.

תיקון הוק שנקרא בתוך תנאי

ה-linter מדווח על זה כ-React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. התיקון תמיד זהה: קוראים להוק בכל פעם, ושמים את התנאי בתוכו.

// Broken: the effect exists on some renders and not others
function Notifications({ user }) {
    if (user) {
        useEffect(() => {
            console.log('subscribe for', user.name);
        }, [user]);
    }
    return null;
}

import { useState, useEffect } from 'react';

function Notifications({ user }) {
    useEffect(() => {
        if (!user) return;
        console.log('subscribe for', user.name);
        return () => console.log('unsubscribe for', user.name);
    }, [user]);

    return <p>{user ? `Notifications for ${user.name}` : 'Log in to see notifications'}</p>;
}

export default function App() {
    const [user, setUser] = useState(null);
    return (
        <div>
            <button onClick={() => setUser(user ? null : { name: 'Ada' })}>
                {user ? 'Log out' : 'Log in'}
            </button>
            <Notifications user={user} />
        </div>
    );
}

האפקט מוצהר בכל רינדור, וה-if שבתוכו מחליט אם לעשות משהו. התחברו והתנתקו כמה פעמים וה-Console מציג subscribe לכל התחברות ו-unsubscribe לכל התנתקות.

הוקים אחרי return מוקדם

גם return מוקדם הוא תנאי. זה מייצר "Rendered more hooks than during the previous render" בפעם הראשונה ש-loading הופך ל-false, כי הרינדור הזה מגיע להוק שהקודם אף פעם לא קרא לו. כשרינדור קורא לפחות הוקים מהקודם, ההודעה היא "Rendered fewer hooks than expected".

// Broken: useState is skipped while loading
function Comments({ loading, comments }) {
    if (loading) return <p>Loading...</p>;
    const [expanded, setExpanded] = useState(false);
    return <List items={comments} expanded={expanded} />;
}

import { useState } from 'react';

function Comments({ loading, comments }) {
    const [expanded, setExpanded] = useState(false);

    if (loading) return <p>Loading...</p>;

    const shown = expanded ? comments : comments.slice(0, 2);
    return (
        <div>
            <ul>
                {shown.map((c) => (
                    <li key={c}>{c}</li>
                ))}
            </ul>
            <button onClick={() => setExpanded(!expanded)}>
                {expanded ? 'Show less' : `Show all ${comments.length}`}
            </button>
        </div>
    );
}

export default function App() {
    const [loading, setLoading] = useState(true);
    return (
        <div>
            <button onClick={() => setLoading(!loading)}>Toggle loading</button>
            <Comments loading={loading} comments={['Nice!', 'Agreed.', 'First.', 'Thanks']} />
        </div>
    );
}

כל הוק יושב מעל ה-return, כך ששני הענפים קוראים לאותם הוקים. לחצו על "Toggle loading", הרחיבו את הרשימה, ואז החליפו את מצב הטעינה פעמיים: הרשימה זוכרת שהיא הייתה מורחבת, כי ה-state אף פעם לא דולג.

הוקים בלולאה

אי אפשר לקרוא ל-useState פעם אחת לכל פריט בלולאה, כי מספר הפריטים משתנה. תנו לכל פריט קומפוננטה משלו וקראו להוק שם; לכל מופע יש מקומות משלו.

import { useState } from 'react';

function Item({ name }) {
    const [qty, setQty] = useState(0);
    return (
        <li>
            {name}: {qty} <button onClick={() => setQty(qty + 1)}>+</button>
        </li>
    );
}

export default function App() {
    const [items, setItems] = useState(['Tea', 'Milk']);
    return (
        <div>
            <ul>
                {items.map((name) => (
                    <Item key={name} name={name} />
                ))}
            </ul>
            <button onClick={() => setItems([...items, `Item ${items.length + 1}`])}>
                Add item
            </button>
        </div>
    );
}

"Invalid hook call"

ההודעה מתחילה ב-"Invalid hook call. Hooks can only be called inside of the body of a function component." יש לה שלוש סיבות רגילות:

1. ההוק רץ כש-React לא מרנדרת קומפוננטת פונקציה. ב-event handler, בתוך callback של אפקט, בקומפוננטת class, או ברמת המודול. העבירו אותו לגוף הקומפוננטה או להוק מותאם, וקראו להוק המותאם מהקומפוננטה.
2. הגרסאות של react ו-react-dom לא תואמות. התקינו את אותה גרסה של שתיהן.
3. יש שני עותקים של React. חבילה מקומית מקושרת או ספרייה שאורזת React משלה מביאות עותק שני, והוקים מעותק אחד לא עובדים עם הרנדרר של השני. הריצו npm ls react וודאו שמופיעה רק גרסה אחת.

npm ls react

התצוגה המקדימה כאן רצה כמו build של פרודקשן, שלא מדפיס את ההודעות האלה: הוק שנקרא מ-event handler נכשל עם TypeError רגיל כמו "Cannot read properties of null", והשגיאות של React עצמה מגיעות כקודים קצרים של "Minified React error". הריצו את האפליקציה שלכם במצב פיתוח כדי לקרוא את הטקסט המלא.

תנו ל-linter לאכוף את זה

eslint-plugin-react-hooks בודק את שני הכללים תוך כדי הקלדה, וגם בודק מערכי תלויות של אפקטים. תבנית ה-React של Vite והגדרות ה-ESLint של Next.js כוללות אותו. בהגדרת ESLint שטוחה (flat config), הפעילו את ה-preset המומלץ שלו:

// eslint.config.js
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([reactHooks.configs.flat.recommended]);

שני כללי הליבה הם react-hooks/rules-of-hooks (שגיאה) ו-react-hooks/exhaustive-deps (אזהרה). מאז גרסה 7 ה-preset מפעיל גם כללים שמגיעים מ-React Compiler, כמו react-hooks/purity ו-react-hooks/refs, שמסמנים רינדורים לא טהורים וקריאה של refs בזמן הרינדור. כדי לבחור כללים אחד אחד, רשמו את הפלאגין בתור plugins: { 'react-hooks': reactHooks } ופרטו את הכללים שאתם רוצים.

הפלאגין מוצא הוקים לפי שם: כל פונקציה ששמה מתחיל ב-use ואחריו אות גדולה נחשבת להוק, ורק קומפוננטות (שמות באות גדולה) ופונקציות use אחרות יכולות לקרוא לה. לכן הוקים מותאמים אישית חייבים להשתמש בקידומת.

החריג: use

use, שנוסף ב-React 19, קורא promise או קונטקסט, ובניגוד לכל הוק אחר אפשר לקרוא לו בתוך תנאי או לולאה. עדיין צריך לקרוא לו בזמן הרינדור, בתוך קומפוננטה או הוק.

import { createContext, use, useState } from 'react';

const ThemeContext = createContext('light');

function Heading({ children, themed }) {
    let color = '#000';
    if (themed) {
        const theme = use(ThemeContext);
        color = theme === 'dark' ? '#7aa7ff' : '#c0392b';
    }
    return <h3 style={{ color }}>{children}</h3>;
}

export default function App() {
    const [theme, setTheme] = useState('light');
    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                Theme: {theme}
            </button>
            <Heading>Plain heading</Heading>
            <Heading themed>Themed heading</Heading>
        </ThemeContext>
    );
}

רק הכותרת עם ערכת הנושא משנה צבע כשמחליפים את ערכת הנושא. נסו את אותו דבר עם useContext בתוך ה-if וה-linter מסמן את זה. הדף על ההוק use מכסה קריאת promises איתו.