React 19: الميزات الجديدة والواجهات المحذوفة وكيفية الترقية

React 19 هي الإصدار الرئيسي من React الذي صدر في ديسمبر 2024. تضيف الإجراءات (Actions، وهي دوال غير متزامنة تدير حالة الانتظار والأخطاء والنماذج)، والخطافات useActionState وuseOptimistic وuse، وref كـ prop عادية، ووسوم <title> و<meta> التي تنقلها React إلى رأس المستند. وأضافت React 19.2 (أكتوبر 2025) المكوّن <Activity> والخطاف useEffectEvent.

كل مثال أدناه يعمل على React 19.2. إليك إجراءً: دالة غير متزامنة تُمرَّر إلى نموذج، مع حالة الانتظار والخطأ المُرجع اللذين يتولاهما 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().

الإجراءات وإجراءات النماذج

في React 18 كنت تكتب الخطوات نفسها لكل نموذج: منع الإرسال الافتراضي، وضبط علامة تحميل، وانتظار الطلب، وتخزين خطأ، ومسح العلامة. تسمي React 19 الدالة التي تؤدي عملًا غير متزامن داخل انتقال إجراءً (Action)، وتتولى هذا الحساب نيابة عنك.

• صارت startTransition (وuseTransition) تقبل دالة غير متزامنة. وتبقى isPending قيمتها true حتى تنتهي الدالة كلها.
• يستدعي <form action={fn}> الدالة fn مع FormData الخاص بالنموذج عند إرساله. وتعمل كإجراء، وبعد انتهائها تعيد React ضبط الحقول غير المتحكم بها في النموذج.
• يعطي <button formAction={fn}> زر إرسال واحدًا إجراءه الخاص.
• يحتفظ useActionState بالقيمة التي أرجعها الإجراء آخر مرة، فيستطيع الإجراء إرجاع رسالة خطأ أو السجل المحفوظ.
• يتيح 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 النتيجة التي تتوقعها بينما ما زال الإجراء يعمل، ويعود إلى الحالة الحقيقية عندما ينتهي الإجراء. يمكن لعدّاد الإعجابات أن يرتفع لحظة نقرك، وأن يعود إلى الأسفل إذا فشل الطلب.

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

في صفحة useOptimistic مثال قابل للتشغيل بواجهة برمجية وهمية تفشل عمدًا، لتراقب التراجع.

الواجهة use

تقرأ use قيمة من وعد أو من سياق. مع الوعد تعلّق المكوّن حتى يُحل الوعد، ويعرض أقرب <Suspense> بديله في الأثناء. وخلافًا لكل خطاف آخر، يمكن استدعاء 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، وتنظيف المراجع

صار مكوّن الدالة يستقبل ref مثل أي prop أخرى. لم تعد تحتاج إلى تغليفه بـ forwardRef لتمرير مرجع إلى عنصر 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>
    );
}

ويمكن لدالة المرجع أيضًا أن تُرجع دالة تنظيف. تستدعيها React عندما يغادر العنصر الشاشة، بالطريقة نفسها التي تعمل بها دالة تنظيف التأثير. أما دالة المرجع التي لا تُرجع شيئًا فما زالت تُستدعى بـ 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>
    );
}

انقر الزر بضع مرات واقرأ وحدة التحكم: كل إزالة تسجّل سطر التنظيف، وكل عودة تسجّل attached to DIV.

البيانات الوصفية للمستند

يمكنك عرض <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" /> داخل مكوّن في الرأس مرة واحدة، بترتيب الأولوية، وتنتظره React قبل عرض المحتوى الذي يحتاجه. ووسم <script async src="..."> الذي تعرضه عدة مكوّنات لا يُحمَّل إلا مرة واحدة. وتصدّر react-dom أيضًا preload وpreinit وpreconnect وprefetchDNS لتلميحات الموارد.

Activity وuseEffectEvent (React 19.2)

يخفي <Activity mode="hidden"> أبناءه دون رمي حالتهم. تخفي React الـ DOM، وتشغّل دوال تنظيف التأثيرات، وتستعيد كل شيء عندما يصبح الوضع "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 وحالة، لكن تغييرها لا يعيد تشغيل التأثير:

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 لمكوّنات الخادم (تخبرك متى لم تعد نتيجة cache() مطلوبة) ومسارات الأداء (Performance Tracks) في لوحة الأداء في Chrome DevTools. وأضافت React 19.1 الدالة captureOwnerStack، وهي دالة للتطوير فقط تُرجع المكوّنات التي عرضت المكوّن الحالي.

مكوّنات الخادم ودوال الخادم

مكوّنات الخادم مكوّنات تعمل مسبقًا على الخادم (أو وقت البناء) وترسل مخرجاتها إلى المتصفح. يمكن أن تكون async وتقرأ قاعدة بيانات مباشرة، ولا يُرسل كودها إلى العميل أبدًا. ودوال الخادم (التي سُميت أولًا Server Actions) دوال غير متزامنة معلّمة بـ 'use server' يستطيع مكوّن العميل استدعاءها كدالة عادية. ويحتاج كلاهما إلى إطار عمل بأداة تجميع تدعمهما، مثل 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') });
}

الواجهات المحذوفة والمتغيرة

حذفت React 19 واجهات كانت مُهملة منذ سنوات:

تحتفظ مكوّنات الأصناف بـ defaultProps. وتُبلَّغ الأخطاء أيضًا بشكل مختلف: الأخطاء التي تلتقطها حدود الأخطاء تُسجَّل بـ console.error مرة واحدة، والأخطاء غير الملتقطة تذهب إلى window.reportError، ويقبل createRoot الخيارين onCaughtError وonUncaughtError لتبلّغ عنها بنفسك.

الترقية إلى React 19

رقّ إلى React 18.3 أولًا. فهي مطابقة لـ 18.2 لكنها تحذّر من الواجهات المُهملة والتغييرات الأخرى التي تحتاجها React 19، فتستطيع إصلاحها والتطبيق ما زال يعمل. وتتطلب React 19 أيضًا تحويل JSX الحديث، الذي يستخدمه Vite وكل إطار عمل حالي أصلًا. ثم ثبّت React 19:

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

يشير دليل الترقية الرسمي إلى أدوات تعديل آلي (codemods) للتغييرات الآلية. الأولى تغطي مراجع النصوص واستيرادات act وReactDOM.render؛ والثانية تحدّث كود TypeScript للأنواع الجديدة:

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

بعد الترقية، لا شيء يجبرك على تبنّي الإجراءات أو الخطافات الجديدة. تظل المكوّنات والخطافات ومكوّنات الأصناف الموجودة تعمل؛ ويمكنك نقل النماذج إلى <form action> واحدًا تلو الآخر.