React 19: פיצ'רים חדשים, APIs שהוסרו ואיך משדרגים

React 19 היא הגרסה הראשית של React ששוחררה בדצמבר 2024. היא מוסיפה Actions (פונקציות async שמנהלות מצב pending, שגיאות וטפסים), את ההוקים useActionState, useOptimistic ו-use, ref כ-prop רגיל, ותגיות <title> ו-<meta> ש-React מעבירה ל-head של המסמך. React 19.2 (אוקטובר 2025) הוסיפה את <Activity> ואת useEffectEvent.

כל דוגמה שמתחת רצה על React 19.2. הנה Action: פונקציה async שמועברת לטופס, כשמצב ה-pending והשגיאה שמוחזרת מטופלים על ידי useActionState.

import { useActionState } from 'react';

function saveName(name) {
    // Stands in for a real request
    return new Promise((resolve) => setTimeout(resolve, 800));
}

async function updateName(previousState, formData) {
    const name = formData.get('name').trim();
    if (!name) {
        return { error: 'Please type a name.', saved: previousState.saved };
    }
    await saveName(name);
    return { error: null, saved: name };
}

export default function App() {
    const [state, formAction, isPending] = useActionState(updateName, {
        error: null,
        saved: null,
    });

    return (
        <form action={formAction}>
            <input name="name" placeholder="Your name" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            {state.error && <p style={{ color: 'crimson' }}>{state.error}</p>}
            {state.saved && <p>Saved as {state.saved}.</p>}
        </form>
    );
}

לחצו על Save כשהשדה ריק כדי לראות את השגיאה, ואז הקלידו שם ושמרו: על הכפתור כתוב "Saving..." במשך 800 מילישניות. אין useState בשביל השגיאה, אין דגל isLoading ואין e.preventDefault().

Actions ו-form actions

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

• startTransition (ו-useTransition) מקבלים עכשיו פונקציה async. isPending נשאר true עד שכל הפונקציה מסתיימת.
• <form action={fn}> קורא ל-fn עם ה-FormData של הטופס כשהטופס נשלח. היא רצה כ-Action, ואחרי שהיא מסתיימת React מאפסת את השדות הלא מבוקרים של הטופס.
• <button formAction={fn}> נותן לכפתור שליחה אחד action משלו.
• useActionState שומר את הערך שה-action החזיר לאחרונה, כך ש-action יכול להחזיר הודעת שגיאה או את הרשומה שנשמרה.
• useFormStatus מ-react-dom מאפשר לקומפוננטה בתוך טופס לקרוא אם הטופס הזה נשלח, בלי להעביר props מטה. הוא צריך <form> הורה, אז כאן הוא מופיע בבלוק סטטי:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

useOptimistic

useOptimistic מציג את התוצאה שאתם מצפים לה בזמן ש-Action עדיין רץ, וחוזר ל-state האמיתי כשה-Action מסתיים. מונה לייקים יכול לעלות ברגע שלוחצים, ולרדת בחזרה אם הבקשה נכשלת.

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

בדף על useOptimistic יש דוגמה שרצה עם API מזויף שנכשל בכוונה, כדי שתוכלו לראות את ה-rollback.

ה-API use

use קורא ערך מ-promise או מקונטקסט. עם promise הוא עושה suspend לקומפוננטה עד שה-promise מסתיים, וה-<Suspense> הקרוב מציג בינתיים את ה-fallback שלו. בניגוד לכל הוק אחר, אפשר לקרוא ל-use בתוך if או לולאה, ואחרי return מוקדם.

React 19 גם מאפשרת לרנדר <ThemeContext value="dark"> ישירות במקום <ThemeContext.Provider>. שניהם מופיעים בדוגמה הזו:

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

const ThemeContext = createContext('light');

function Badge({ show }) {
    if (!show) return null;
    // A normal hook could not be called after an early return. use can.
    const theme = use(ThemeContext);
    const dark = theme === 'dark';
    return (
        <span style={{ padding: '2px 8px', background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#222' }}>
            Theme: {theme}
        </span>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    const [show, setShow] = useState(true);

    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch theme</button>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} badge</button>
            <p>
                <Badge show={show} />
            </p>
        </ThemeContext>
    );
}

ref כ-prop, ו-cleanup ל-ref

קומפוננטת פונקציה מקבלת עכשיו ref כמו כל prop אחר. כבר לא צריך לעטוף אותה ב-forwardRef כדי להעביר ref הלאה לאלמנט DOM.

import { useRef } from 'react';

function TextField({ label, ref }) {
    return (
        <label>
            {label} <input ref={ref} />
        </label>
    );
}

export default function App() {
    const inputRef = useRef(null);

    return (
        <div>
            <TextField label="Email" ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus the field</button>
        </div>
    );
}

ref callback יכול גם להחזיר פונקציית cleanup. React קוראת לה כשהאלמנט עוזב את המסך, בדיוק כמו ש-cleanup של אפקט עובד. callback שלא מחזיר כלום עדיין נקרא עם null בהסרה, כמו ב-React 18.

import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <button onClick={() => setVisible(!visible)}>{visible ? 'Remove' : 'Add'} the box</button>
            {visible && (
                <div
                    ref={(node) => {
                        console.log('attached to', node.tagName);
                        return () => console.log('cleanup: detached');
                    }}
                    style={{ marginTop: 8, padding: 12, background: '#e8f0fe' }}
                >
                    A box with a ref
                </div>
            )}
        </div>
    );
}

לחצו על הכפתור כמה פעמים וקראו את הקונסול: כל הסרה רושמת את שורת ה-cleanup, וכל חזרה רושמת attached to DIV.

metadata של המסמך

אפשר לרנדר <title>, <meta> ו-<link> בכל מקום בקומפוננטה, ו-React מעבירה אותם ל-<head>. קומפוננטת דף יכולה לקבוע את הכותרת שלה בלי ספרייה כמו react-helmet.

import { useEffect, useState } from 'react';

function Article({ title }) {
    return (
        <article>
            <title>{title}</title>
            <meta name="description" content={`An article about ${title}`} />
            <h3>{title}</h3>
        </article>
    );
}

export default function App() {
    const [title, setTitle] = useState('Hooks');

    useEffect(() => {
        console.log('document.title is now:', document.title);
    }, [title]);

    return (
        <div>
            <button onClick={() => setTitle(title === 'Hooks' ? 'Actions' : 'Hooks')}>Open the other article</button>
            <Article title={title} />
        </div>
    );
}

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

גם גיליונות סגנון קיבלו את אותו טיפול: <link rel="stylesheet" href="..." precedence="default" /> בתוך קומפוננטה מוכנס ל-head פעם אחת, לפי סדר ה-precedence, ו-React מחכה לו לפני שהיא מציגה את התוכן שצריך אותו. <script async src="..."> שמרונדר על ידי כמה קומפוננטות נטען רק פעם אחת. react-dom גם מייצאת את preload, preinit, preconnect ו-prefetchDNS בשביל resource hints.

Activity ו-useEffectEvent (React 19.2)

<Activity mode="hidden"> מסתיר את הילדים שלו בלי לזרוק את ה-state שלהם. React מסתירה את ה-DOM, מריצה את ה-cleanups של האפקטים, ומשחזרת הכל כשה-mode הופך שוב ל-"visible". זה מתאים לטאבים ולפאנלים שאתם מצפים שהמשתמש יחזור אליהם.

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

function Notes() {
    const [text, setText] = useState('');
    useEffect(() => {
        console.log('Notes effect: setup');
        return () => console.log('Notes effect: cleanup');
    }, []);
    return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Type a note" />;
}

export default function App() {
    const [tab, setTab] = useState('notes');

    return (
        <div>
            <button onClick={() => setTab('notes')}>Notes</button>
            <button onClick={() => setTab('about')}>About</button>
            <div style={{ marginTop: 8 }}>
                <Activity mode={tab === 'notes' ? 'visible' : 'hidden'}>
                    <Notes />
                </Activity>
                {tab === 'about' && <p>Your note is kept while this tab is open.</p>}
            </div>
        </div>
    );
}

הקלידו הערה, עברו ל-About וחזרו. הטקסט עדיין שם, והקונסול מראה שהאפקט נוקה בזמן שהוסתר. החליפו את עטיפת ה-<Activity> ב-{tab === 'notes' && <Notes />} וההערה הולכת לאיבוד בכל מעבר.

useEffectEvent מוציא פונקציה מהתלויות של אפקט. הפונקציה תמיד רואה את ה-props וה-state העדכניים, אבל שינוי שלהם לא מפעיל את האפקט מחדש:

function ChatRoom({ roomId, theme }) {
    const onConnected = useEffectEvent(() => {
        showNotification('Connected!', theme);
    });

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

19.2 הוסיפה גם את cacheSignal ל-Server Components (הוא אומר לכם מתי תוצאה של cache() כבר לא נחוצה) ואת Performance Tracks בפאנל הביצועים של Chrome DevTools. React 19.1 הוסיפה את captureOwnerStack, פונקציה לזמן פיתוח בלבד שמחזירה אילו קומפוננטות רינדרו את הנוכחית.

Server Components ו-Server Functions

Server Components הן קומפוננטות שרצות מראש בשרת (או בזמן ה-build) ושולחות את הפלט שלהן לדפדפן. הן יכולות להיות async ולקרוא ממסד נתונים ישירות, והקוד שלהן אף פעם לא נשלח ללקוח. Server Functions (שנקראו בהתחלה Server Actions) הן פונקציות async שמסומנות ב-'use server' שקומפוננטת לקוח יכולה לקרוא להן כמו לפונקציה רגילה. שתיהן צריכות framework עם bundler שתומך בהן, כמו ה-App Router של Next.js, ולכן הן לא יכולות לרוץ בעורך הזה.

// A Server Component: async, runs on the server only
export default async function Notes() {
    const notes = await db.notes.findMany();
    return notes.map((note) => <Note key={note.id} note={note} />);
}

// A Server Function, usable as a form action
async function createNote(formData) {
    'use server';
    await db.notes.create({ text: formData.get('text') });
}

APIs שהוסרו ושהשתנו

React 19 הסירה APIs שהיו מסומנים כמיושנים במשך שנים:

קומפוננטות class שומרות על defaultProps. גם שגיאות מדווחות אחרת: שגיאות שנתפסות על ידי error boundary נרשמות עם console.error פעם אחת, שגיאות שלא נתפסו הולכות ל-window.reportError, ו-createRoot מקבל את האפשרויות onCaughtError ו-onUncaughtError כדי לדווח עליהן בעצמכם.

שדרוג ל-React 19

שדרגו קודם ל-React 18.3. היא זהה ל-18.2 אבל מזהירה על ה-APIs המיושנים ועל שינויים אחרים ש-React 19 צריכה, כך שאפשר לתקן אותם בזמן שהאפליקציה עדיין עובדת. React 19 גם דורשת את ה-JSX transform המודרני, ש-Vite וכל framework עדכני כבר משתמשים בו. אז התקינו את React 19:

npm install react@^19 react-dom@^19
npm install --save-dev @types/react@^19 @types/react-dom@^19

מדריך השדרוג הרשמי מפנה ל-codemods בשביל השינויים המכניים. הראשון מכסה string refs, ייבוא של act ו-ReactDOM.render; השני מעדכן קוד TypeScript לטיפוסים החדשים:

npx codemod@latest react/19/migration-recipe
npx types-react-codemod@latest preset-19 ./src

אחרי השדרוג, שום דבר לא מכריח אתכם לאמץ Actions או את ההוקים החדשים. קומפוננטות, הוקים וקומפוננטות class קיימים ממשיכים לעבוד; אפשר להעביר טפסים ל-<form action> אחד אחד.