ההוק use ב-React: קריאת promises וקונטקסט ברינדור

use הוא API של React 19 שקורא ערך מ-promise או מקונטקסט בזמן שקומפוננטה מתרנדרת. use(promise) עוצר את הקומפוננטה עד שה-promise מסתיים, ומציג בינתיים את ה-fallback של ה-<Suspense> הקרוב; use(context) עובד כמו useContext אבל יכול לשבת בתוך if או לולאה.

הפונקציה fetchUser שמתחת מחליפה בקשה אמיתית.

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

function fetchUser(id) {
    console.log('fetching user', id);
    return new Promise((resolve) =>
        setTimeout(() => resolve({ id, name: id === 1 ? 'Ada' : 'Linus' }), 1000),
    );
}

function Profile({ userPromise }) {
    const user = use(userPromise);
    return <p>User #{user.id}: {user.name}</p>;
}

export default function App() {
    const [userPromise, setUserPromise] = useState(() => fetchUser(1));

    return (
        <div>
            <button onClick={() => setUserPromise(fetchUser(1))}>User 1</button>
            <button onClick={() => setUserPromise(fetchUser(2))}>User 2</button>
            <Suspense fallback={<p>Loading...</p>}>
                <Profile userPromise={userPromise} />
            </Suspense>
        </div>
    );
}

הרינדור הראשון מציג "Loading..." לשנייה אחת, ואז את הפרופיל. לחצו על User 2: ה-fallback חוזר בזמן שה-promise החדש ממתין. ל-Profile אין מצב טעינה משלה; היא כתובה כאילו הנתונים כבר שם.

איך use(promise) עובד

כש-Profile קוראת ל-use(userPromise):

• אם ה-promise הסתיים, use מחזיר את הערך שלו והרינדור ממשיך.
• אם הוא עדיין ממתין, React מפסיקה לרנדר את Profile ומציגה את ה-fallback של ה-<Suspense> הקרוב מעליה. כשה-promise מסתיים, React מרנדרת שוב את Profile, והפעם use מחזיר את הערך.
• אם הוא נכשל, React מציגה במקום את ה-error boundary הקרוב.

React זוכרת את התוצאה על אובייקט ה-promise עצמו. לכן ה-promise חייב להיות אותו אובייקט ברינדור הבא.

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

<button onClick={() => startTransition(() => setUserPromise(fetchUser(2)))}>User 2</button>

איפה ליצור את ה-promise

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

// Do not do this
function Profile({ id }) {
    const user = use(fetchUser(id)); // a new promise on every render
    return <p>{user.name}</p>;
}

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

צרו את ה-promise במקום שלא רץ מחדש בכל רינדור של הקורא:

• בהורה, שמור ב-state (כמו בדוגמה הראשונה) או שנוצר ב-event handler.
• ברמת המודול, כשהנתונים לא תלויים ב-props: const configPromise = fetchConfig(); מעל הקומפוננטה.
• ב-cache לפי הארגומנטים, כך שאותו id מחזיר את אותו promise.
• ב-framework: Server Component יכול להעביר promise לקומפוננטת לקוח כ-prop, ו-route loaders עושים את אותו דבר. זה המקרה ש-use תוכנן בשבילו.

הנה גרסת ה-cache, כך שקומפוננטה יכולה לבקש נתונים לפי id ועדיין לקבל promise יציב:

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

const cache = new Map();
function getWeather(city) {
    if (!cache.has(city)) {
        console.log('request for', city);
        // Stands in for a real request
        cache.set(city, new Promise((resolve) => setTimeout(() => resolve(`${city.length * 3} °C`), 800)));
    }
    return cache.get(city);
}

function Weather({ city }) {
    const temperature = use(getWeather(city));
    return <p>{city}: {temperature}</p>;
}

export default function App() {
    const [city, setCity] = useState('Lisbon');

    return (
        <div>
            {['Lisbon', 'Oslo', 'Cairo'].map((c) => (
                <button key={c} onClick={() => setCity(c)}>{c}</button>
            ))}
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather city={city} />
            </Suspense>
        </div>
    );
}

לחצו על שלוש הערים, ואז חזרו לאחת שכבר פתחתם. הקונסול רושם בקשה אחת לכל עיר, ועיר שכבר ראיתם מופיעה בלי ה-fallback, כי ה-promise שלה כבר הסתיים. מחקו את הבדיקה if (!cache.has(city)) והקומפוננטה חוזרת לעשות suspend לנצח.

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

use(context), אפילו בתוך if

use(SomeContext) מחזיר את אותו ערך כמו useContext(SomeContext). ההבדל הוא איפה אפשר לקרוא לו. כל הוק אחר חייב לרוץ ברמה העליונה, באותו סדר בכל רינדור (כללי ההוקים). את use אפשר לקרוא אחרי return מוקדם, בתוך תנאי, או בלולאה.

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

const UserContext = createContext(null);

function Greeting({ showName }) {
    if (!showName) {
        return <p>Hello!</p>;
    }
    const user = use(UserContext);
    return <p>Hello, {user.name}!</p>;
}

export default function App() {
    const [showName, setShowName] = useState(false);

    return (
        <UserContext value={{ name: 'Grace' }}>
            <button onClick={() => setShowName(!showName)}>
                {showName ? 'Hide' : 'Show'} the name
            </button>
            <Greeting showName={showName} />
        </UserContext>
    );
}

לחצו על הכפתור כדי לעבור בין שני הענפים. החליפו את use(UserContext) ב-useContext(UserContext) והקוד שובר את כללי ההוקים, כי ההוק היה רץ בחלק מהרינדורים ובאחרים לא.

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

שגיאות: error boundaries, לא try/catch

כשה-promise נכשל, השגיאה הולכת ל-error boundary הקרוב, באותה דרך כמו שגיאת רינדור.

// This throws on purpose: the second request rejects and the boundary shows it.
import { Component, Suspense, use, useState } from 'react';

function fetchPost(id) {
    // Stands in for a real request. Post 2 does not exist.
    return new Promise((resolve, reject) =>
        setTimeout(() => (id === 2 ? reject(new Error('Post 2 not found')) : resolve(`Post ${id} body`)), 600),
    );
}

class ErrorBoundary extends Component {
    state = { error: null };
    static getDerivedStateFromError(error) {
        return { error };
    }
    render() {
        if (this.state.error) return <p style={{ color: 'crimson' }}>{this.state.error.message}</p>;
        return this.props.children;
    }
}

function Post({ postPromise }) {
    return <p>{use(postPromise)}</p>;
}

export default function App() {
    const [id, setId] = useState(1);
    const [postPromise, setPostPromise] = useState(() => fetchPost(1));

    function open(next) {
        setId(next);
        setPostPromise(fetchPost(next));
    }

    return (
        <div>
            <button onClick={() => open(1)}>Post 1</button>
            <button onClick={() => open(2)}>Post 2</button>
            <ErrorBoundary key={id}>
                <Suspense fallback={<p>Loading...</p>}>
                    <Post postPromise={postPromise} />
                </Suspense>
            </ErrorBoundary>
        </div>
    );
}

פתחו את Post 2 וה-boundary מציג את הודעת השגיאה. פתחו שוב את Post 1 וזה עובד: key={id} נותן ל-boundary מצב חדש לכל פוסט, כך שהוא לא ממשיך להציג את השגיאה הישנה.

אי אפשר לתפוס use ממתין או שנכשל עם try/catch. בזמן שה-promise ממתין, use קוטע את הרינדור על ידי זריקת ערך מיוחד, ו-catch סביבו היה בולע אותו. הערך שנתפס הוא שגיאה שההודעה שלה מתחילה ב-"Suspense Exception: This is not a real error!", ובפיתוח React גם רושמת "use was called from inside a try/catch block". כדי להציג ערך גיבוי במקום מסך שגיאה, טפלו בכישלון על ה-promise לפני שאתם מעבירים אותו מטה:

const postPromise = fetchPost(id).catch(() => 'This post could not be loaded.');

use בהשוואה לטעינה עם useEffect

הדפוס הקלאסי בצד הלקוח טוען באפקט ומחזיק שלושה חלקי state:

function Profile({ id }) {
    const [user, setUser] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        let ignore = false;
        fetchUser(id).then(
            (u) => !ignore && setUser(u),
            (e) => !ignore && setError(e),
        );
        return () => {
            ignore = true;
        };
    }, [id]);

    if (error) return <p>Error</p>;
    if (!user) return <p>Loading...</p>;
    return <p>{user.name}</p>;
}

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