ההוק useTransition ב-React: ממשק שנשאר רספונסיבי

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

import { useState, useTransition } from 'react';

function SlowPost({ index }) {
    const start = performance.now();
    while (performance.now() - start < 1) {
        // each post takes 1 ms to render
    }
    return <li>Post #{index + 1}</li>;
}

function PostsTab() {
    console.log('rendering 300 slow posts');
    const posts = [];
    for (let i = 0; i < 300; i++) posts.push(<SlowPost key={i} index={i} />);
    return <ul style={{ maxHeight: 150, overflow: 'auto' }}>{posts}</ul>;
}

export default function App() {
    const [tab, setTab] = useState('about');
    const [isPending, startTransition] = useTransition();

    function select(next) {
        startTransition(() => {
            setTab(next);
        });
    }

    return (
        <div>
            {['about', 'posts', 'contact'].map((name) => (
                <button key={name} onClick={() => select(name)} disabled={tab === name}>
                    {name}
                </button>
            ))}
            {isPending && <span> Loading...</span>}
            {tab === 'about' && <p>Welcome to my profile.</p>}
            {tab === 'posts' && <PostsTab />}
            {tab === 'contact' && <p>Write to me any time.</p>}
        </div>
    );
}

לחצו על posts ואז, לפני שהרשימה מופיעה, לחצו על contact. Contact מופיע מיד: React זרקה את רינדור ה-posts שהיה באמצע. עכשיו שנו את startTransition(() => { setTab(next); }) ל-setTab(next); רגיל ונסו את אותו דבר: הדף קופא לכ-300 מילישניות אחרי הלחיצה על posts, והלחיצה שלכם על contact מחכה עד שה-posts מסתיימים.

התחביר

const [isPending, startTransition] = useTransition();

startTransition(() => {
    setTab(next);
});

• startTransition מקבל פונקציה ומריץ אותה מיד. כל עדכוני ה-state שבתוכה מסומנים כ-transitions.
• isPending הוא true מהרגע שמתחילים את ה-transition ועד ש-React סיימה לרנדר אותו ועשתה commit לתוצאה.

useTransition לא מקבל ארגומנטים. הפונקציה שמעבירים רצה באופן סינכרוני; ה-transition נוגע לאופן שבו React מרנדרת את העדכון שנוצר, לא למתי הפונקציה שלכם רצה.

מה פירוש "לא דחוף"

React מחלקת עדכונים לשני סוגים. עדכונים דחופים, כמו הקלדה, לחיצה ולחיצה על מקש, צריכים להשתקף מיד אחרת הדף מרגיש שבור. עדכוני transition, כמו מעבר לתצוגה חדשה או הצגת תוצאות מסוננות, יכולים לקחת רגע.

React מרנדרת transition בפרוסות קטנות ובודקת בין קומפוננטות אם הגיע משהו דחוף. אם כן, React עוצרת או נוטשת את ה-transition, מטפלת בעדכון הדחוף, ואז מתחילה את ה-transition שוב עם ה-state העדכני. בזמן ש-transition מתרנדר, המסך הקודם נשאר; React לא מציגה תוצאה חצי בנויה. לכן הדוגמה ממשיכה להציג את טקסט ה-about, עם רמז ה-Loading ליד הכפתורים, עד שה-posts מוכנים.

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

הצגת רמז pending

isPending הוא המקום לאינדיקטור טעינה שלא מחליף את התוכן הנוכחי: ספינר ליד הכפתור, טקסט מעומעם, תווית "Saving...". בדוגמה הראשונה הוא מציג Loading... ליד הטאבים. אפשר להשתמש בו גם כדי לעצב את התוכן:

<div style={{ opacity: isPending ? 0.6 : 1 }}>{content}</div>

סינון רשימה גדולה תוך כדי הקלדה

אי אפשר לשים את הערך של שדה עצמו ב-transition. <input> מבוקר חייב לקבל את הערך החדש שלו באותו עדכון דחוף, אחרת תווים הולכים לאיבוד. החזיקו במקום שני חלקי state: הטקסט של השדה (דחוף) והשאילתה שהרשימה משתמשת בה (transition).

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

const all = Array.from({ length: 2000 }, (_, i) => `Item ${i}`);

function SlowRow({ text }) {
    const start = performance.now();
    while (performance.now() - start < 1) {}
    return <li>{text}</li>;
}

const Results = memo(function Results({ query }) {
    console.log('rendering results for', JSON.stringify(query));
    const matches = all.filter((item) => item.includes(query)).slice(0, 200);
    return (
        <ul style={{ maxHeight: 150, overflow: 'auto' }}>
            {matches.map((m) => <SlowRow key={m} text={m} />)}
        </ul>
    );
});

export default function App() {
    const [text, setText] = useState('');
    const [query, setQuery] = useState('');
    const [isPending, startTransition] = useTransition();

    function handleChange(e) {
        setText(e.target.value);
        startTransition(() => {
            setQuery(e.target.value);
        });
    }

    return (
        <div>
            <input value={text} onChange={handleChange} placeholder="Try 12" />
            <div style={{ opacity: isPending ? 0.5 : 1 }}>
                <Results query={query} />
            </div>
        </div>
    );
}

הקלידו 123 מהר. השדה אף פעם לא מפגר. ה-Console עדיין רושם שורת rendering results אחת לכל הקשה, כי Results רושמת ברגע ש-React מתחילה לרנדר אותה, אבל הרשימות של 1 ו-12 אף פעם לא מגיעות למסך: כל הקשה חדשה יותר קטעה את הרינדור שהיה באמצע, ו-React התחילה שוב עם השאילתה העדכנית. Results עטופה ב-memo בכוונה: בלעדיו, הרינדור הדחוף של כל הקשה היה מרנדר גם את הרשימה האיטית עם השאילתה הישנה, והייתם מאבדים את התועלת.

startTransition בלי ההוק

react מייצאת גם את startTransition כפונקציה רגילה. היא מסמנת עדכונים כ-transitions בדיוק כמו ההוק, אבל לא מקבלים isPending. השתמשו בה במקומות שבהם אי אפשר לקרוא להוק, למשל בספריית נתונים או בראוטר מחוץ לכל קומפוננטה.

import { startTransition } from 'react';

function navigate(url) {
    startTransition(() => {
        setCurrentUrl(url);
    });
}

transitions אסינכרוניים ב-React 19

מאז React 19 הפונקציה שמעבירים יכולה להיות async. isPending נשאר אז true לכל אורך הזמן שהפונקציה רצה, כולל ההמתנה, מה שהופך אותו לדרך פשוטה להציג מצב pending בזמן בקשה. ה-saveName המזויף שמתחת מחליף בקשה אמיתית.

import { useState, useTransition } from 'react';

function saveName(name) {
    return new Promise((resolve) => setTimeout(() => resolve(name.trim()), 800));
}

export default function App() {
    const [draft, setDraft] = useState('Ada');
    const [saved, setSaved] = useState('');
    const [isPending, startTransition] = useTransition();

    function handleSave() {
        startTransition(async () => {
            console.log('saving', draft);
            const result = await saveName(draft);
            startTransition(() => {
                setSaved(result);
            });
            console.log('saved', result);
        });
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={handleSave} disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            <p>Saved name: {saved || '(nothing yet)'}</p>
        </div>
    );
}

שימו לב ל-startTransition השני סביב setSaved. React מאבדת את המעקב אחרי ה-transition מעבר ל-await, ולכן עדכון state אחריו צריך להיעטף שוב כדי להיחשב כחלק מה-transition. React קוראת לפונקציה שמועברת בצורה כזו action; useActionState ו-form actions בנויים על אותו מנגנון.

transition הוא לא debounce

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

transitions ו-Suspense

transitions גם משנים את מה שגבול Suspense עושה. בדרך כלל, כשקומפוננטה בתוך גבול עושה suspend (קומפוננטה lazy שנטענת, או נתונים שנקראים עם use), React מחליפה את התוכן ב-fallback. אם העדכון שגרם ל-suspend היה transition, React שומרת במקום זאת את התוכן שכבר על המסך, ו-isPending נשאר true עד שהתוכן החדש מוכן. כך ראוטרים נמנעים מלהבהב ספינר בגודל דף בכל ניווט: הם עוטפים את הניווט ב-transition, והדף הישן נשאר גלוי עד שהבא יכול להתרנדר. תוכן שאף פעם לא הוצג עדיין משתמש ב-fallback, כך שגבול שנחשף לראשונה מתנהג כרגיל.

דברים שלא עובדים

• עדכונים בתוך timeout. startTransition(() => setTimeout(() => setTab(next), 100)) לא מסמן את העדכון, כי הוא רץ אחרי ש-startTransition כבר חזר. שימו את startTransition בתוך ה-timeout במקום.
• קומפוננטה איטית בודדת. React יכולה לקטוע רק בין קומפוננטות, ולכן קומפוננטה אחת שחוסמת לאורך זמן עדיין חוסמת.
• שליטה בשדה קלט. כמו שלמעלה, ה-state של השדה עצמו נשאר דחוף.

למקרה שבו ה-setter של ה-state לא שלכם ואתם רק מקבלים ערך, כמו prop, useDeferredValue נותן לכם את אותה התנהגות.