React ۱۹.۳؛ View Transitions و Fragment Refs

ری اکت ۱۹.۳ نسخه‌ای از React است که در ۹ سپتامبر ۲۰۲۶ منتشر شد و دو API آزمایشی سال ۲۰۲۵ را پایدار کرد: کامپوننت <ViewTransition> برای انیمیشن‌های مبتنی بر View Transition API مرورگر، و Fragment Refs برای گرفتن ref از گروهی از عناصر بدون عنصر والد اضافه. در کنار این دو، تابع browser() در React DOM، پشتیبانی از Trusted Types و رندر مستقیم Context در Server Components هم اضافه شده‌اند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

وضعیت تا آبان ۱۴۰۵: React ۱۹.۳ از ۹ سپتامبر ۲۰۲۶ روی npm در دسترس است. اطلاعیه رسمی react.dev تغییر ناسازگار یا مراحل ارتقای خاصی را فهرست نکرده و جزئیات را به فایل CHANGELOG ارجاع داده است. نسخه‌های قبلی شاخص: React ۱۹.۲ (۱ اکتبر ۲۰۲۵) و React Compiler ۱.۰ (۷ اکتبر ۲۰۲۵).

در این مقاله هر ویژگی React ۱۹.۳ را با مثال کاربردی توضیح می‌دهیم، به نکات RTL در انیمیشن‌ها اشاره می‌کنیم و می‌گوییم ارتقا برای پروژه‌های React و Next.js چه نکاتی دارد.

ری اکت ۱۹.۳ چه ویژگی‌هایی دارد؟

ری اکت ۱۹.۳ پنج تغییر اصلی دارد که طبق اطلاعیه رسمی React ۱۹.۳ به سه پکیج react، react-dom و Server Components مربوط می‌شوند:

ویژگی	پکیج	کاربرد اصلی
<ViewTransition> و addTransitionType	react	انیمیشن ورود، خروج، جابه‌جایی و تغییر اندازه عناصر
Fragment Refs	react	فوکوس، رویداد و Observer روی گروهی از عناصر بدون wrapper
browser()	react-dom	رندر نشدن کامپوننت وابسته به مرورگر روی سرور
Trusted Types	react-dom	کار درست سیاست‌های Trusted Types برای جلوگیری از XSS
<Context> در Server Components	Server Components	اشتراک داده سرور با درخت کلاینت بدون Provider کمکی

همچنین طبق changelog، Transitionها حالا مستقل از هم رندر می‌شوند تا یک Transition کند، بقیه را معطل نکند؛ و در Strict Mode افکت‌ها هنگام hydration هم دو بار اجرا می‌شوند تا رفتار با ریشه‌های client-rendered یکسان شود.

کامپوننت ViewTransition در React ۱۹.۳ چطور کار می‌کند؟

<ViewTransition> کامپوننتی است که با استفاده از View Transition API مرورگر، عناصر را هنگام ورود (enter)، خروج (exit)، تغییر (update) و جابه‌جایی بین دو مکان (share) انیمیت می‌کند. انیمیشن پیش‌فرض یک cross-fade است و با کلاس‌های View Transition در CSS یا با propهای onEnter، onExit، onShare و onUpdate قابل سفارشی‌سازی است.

import { ViewTransition, useState, startTransition } from 'react';

export default function ProductCard({ product }) {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => startTransition(() => setOpen(o => !o))}>
        {open ? 'بستن جزئیات' : 'نمایش جزئیات'}
      </button>
      {open && (
        <ViewTransition>
          <section className="details">{product.description}</section>
        </ViewTransition>
      )}
    </div>
  );
}

نکته کلیدی که اطلاعیه رسمی صریحاً بیان می‌کند: به‌روزرسانی‌هایی که Transition نیستند انیمیشن ایجاد نمی‌کنند، چون قرار است فوری باشند. انیمیشن فقط برای به‌روزرسانی‌های داخل startTransition، آشکار شدن یک <Suspense> یا به‌روزرسانی ناشی از useDeferredValue اجرا می‌شود. همچنین فعلاً این کامپوننت فقط در DOM کار می‌کند.

addTransitionType و انیمیشن جهت‌دار در RTL

با addTransitionType می‌توانید به یک تغییر وضعیت «نوع» بدهید، مثلاً «بعدی» یا «قبلی»، و برای هر نوع انیمیشن متفاوت تعریف کنید. در سایت‌های فارسی که جهت صفحه راست‌به‌چپ است، منطق «بعدی» برعکس سایت‌های انگلیسی است؛ اسلاید بعدی باید از سمت چپ وارد شود:

import { ViewTransition, addTransitionType, startTransition } from 'react';

function nextSlide() {
  startTransition(() => {
    addTransitionType('next');
    setCurrentSlide(c => c + 1);
  });
}

function previousSlide() {
  startTransition(() => {
    addTransitionType('previous');
    setCurrentSlide(c => c - 1);
  });
}

// در RTL جهت‌ها را برعکس کنید: «بعدی» از چپ وارد می‌شود
<ViewTransition
  enter={{ next: 'from-left', previous: 'from-right' }}
  exit={{ next: 'to-right', previous: 'to-left' }}
>
  <Slide />
</ViewTransition>

React هر نوع Transition را به‌عنوان نوع view transition مرورگر هم اضافه می‌کند، بنابراین می‌توانید CSS را با شبه‌کلاس :active-view-transition-type() محدود کنید.

Suspense، تصاویر و فونت‌ها

اگر یک مرز Suspense را داخل <ViewTransition> بگذارید، جایگزینی fallback با محتوای نهایی به‌صورت انیمیشن update انجام می‌شود. اطلاعیه رسمی برای رفتار درست، الگوی update="auto" default="none" را پیشنهاد می‌کند تا fallback فوری و بدون انیمیشن ظاهر شود و فقط تبدیل آن به محتوا انیمیت شود. همچنین می‌توان تصاویر و فونت‌ها را در حین بارگذاری وارد Suspense کرد تا «پرش» ناگهانی آن‌ها هنگام بارگذاری از بین برود.

Fragment Refs در ری اکت ۱۹.۳ چه مشکلی را حل می‌کند؟

Fragment Refs اجازه می‌دهد روی یک <Fragment> ref بگذارید و مجموعه محدودی از متدهای DOM را روی همه فرزندان آن اجرا کنید، بدون اینکه یک div اضافه دور آن‌ها بپیچید. این قابلیت برای کامپوننت‌هایی که چند عنصر هم‌سطح برمی‌گردانند یا ref را forward نمی‌کنند مفید است.

import { Fragment, useRef, useEffect } from 'react';

function MenuItems({ items }) {
  const fragmentRef = useRef(null);

  useEffect(() => {
    // فوکوس روی اولین آیتم، بدون div اضافه
    fragmentRef.current.focus();
  }, []);

  return (
    <Fragment ref={fragmentRef}>
      {items.map(item => (
        <a key={item.id} href={item.url}>{item.title}</a>
      ))}
    </Fragment>
  );
}

متدهای در دسترس روی نمونه Fragment:

• addEventListener، removeEventListener و dispatchEvent برای فرزندان سطح اول.
• focus، focusLast و blur برای جابه‌جایی فوکوس در فرزندان تودرتو؛ برای منوها و دیالوگ‌های دسترس‌پذیر بسیار کاربردی است.
• observeUsing و unobserveUsing برای اتصال IntersectionObserver یا ResizeObserver.
• getClientRects، getRootNode، compareDocumentPosition و scrollIntoView.

مزیت جانبی: حذف div‌های اضافه یعنی DOM سبک‌تر و layoutهای Flex و Grid تمیزتر، که اثر مستقیم روی کیفیت فرانت‌اند دارد.

تابع browser و Trusted Types در React DOM چه کاری انجام می‌دهند؟

تابع browser() به کامپوننتی که روی سرور نمی‌تواند خروجی معنادار تولید کند (مثلاً وابسته به localStorage یا منطقه زمانی کاربر) اجازه می‌دهد از رندر سرور کنار گذاشته شود. با use(browser()) کامپوننت روی سرور Suspense می‌شود و HTML نزدیک‌ترین fallback را نشان می‌دهد، اما در مرورگر پس از hydration معلق نمی‌شود.

import { use } from 'react';
import { browser } from 'react-dom';

// این کامپوننت به localStorage و منطقه زمانی کاربر وابسته است
function LastVisit() {
  use(browser()); // روی سرور Suspense می‌شود، در مرورگر نه
  const last = localStorage.getItem('last-visit');
  return <p>آخرین بازدید شما: {last}</p>;
}

Trusted Types یک API امنیتی مرورگر برای جلوگیری از XSS مبتنی بر DOM است. طبق اطلاعیه رسمی، React قبلاً همه مقادیر را پیش از ارسال به DOM به رشته تبدیل می‌کرد و همین باعث می‌شد اشیای Trusted Types به رشته ساده تبدیل و توسط مرورگر رد شوند. در ۱۹.۳ این مقادیر بدون تبدیل عبور می‌کنند و سیاست‌های Trusted Types سایت درست کار می‌کنند.

نکته: Trusted Types جایگزین به‌روزرسانی امنیتی نیست. اگر از React Server Components استفاده می‌کنید، حتماً نسخه‌های وصله‌شده را نصب کنید؛ در دسامبر ۲۰۲۵ یک آسیب‌پذیری بحرانی اجرای کد از راه دور در RSC اعلام شد.

آیا ارتقا به ری اکت ۱۹.۳ لازم است؟

ارتقا به ری اکت ۱۹.۳ برای پروژه‌هایی که از React ۱۹ استفاده می‌کنند معمولاً کم‌ریسک است، چون اطلاعیه رسمی تغییر ناسازگاری اعلام نکرده؛ اما دو رفتار جدید را باید تست کنید. مقایسه سریع:

وضعیت پروژه	پیشنهاد	دلیل
React ۱۹.۰ تا ۱۹.۲ با Server Components	ارتقا به آخرین نسخه وصله‌شده	رفع آسیب‌پذیری‌های امنیتی RSC
React ۱۹.x بدون RSC (SPA با Vite)	ارتقا پس از اجرای تست‌ها	دسترسی به ViewTransition و Fragment Refs
React 18	ابتدا مهاجرت به React ۱۹ با راهنمای رسمی	۱۹.۳ روی تغییرات بزرگ React ۱۹ بنا شده
پروژه Next.js	ارتقا از طریق نسخه Next.js سازگار	Next.js نسخه React خودش را مدیریت می‌کند

دو تغییر رفتاری که در تست‌ها باید به آن توجه کنید:

1. اجرای دوباره افکت‌ها هنگام hydration در Strict Mode: اگر افکت‌ها idempotent نباشند (مثلاً دو بار درخواست ثبت ارسال کنند)، در محیط توسعه زودتر خودش را نشان می‌دهد.
2. رندر مستقل Transitionها: اگر کدی به ترتیب خاصی از کامل شدن چند Transition وابسته بوده، دوباره بررسی شود.
3. هشدار جدید برای use: فراخوانی نادرست use داخل شرط حالا هشدار می‌دهد.

ری اکت ۱۹.۳ برای توسعه‌دهندگان وردپرس چه معنایی دارد؟

ری اکت ۱۹.۳ برای توسعه‌دهنده وردپرس مستقیماً مهم است، چون ویرایشگر بلاک گوتنبرگ و بخش بزرگی از پیشخوان مدرن وردپرس با React ساخته شده‌اند و بلاک‌های سفارشی هم با React نوشته می‌شوند. البته وردپرس نسخه React خودش را همراه هسته عرضه می‌کند و بلاک‌ها باید از پکیج‌های @wordpress/element و وابستگی‌های اعلام‌شده هسته استفاده کنند، نه اینکه نسخه دلخواه React را جداگانه بارگذاری کنند. بنابراین قابلیت‌هایی مثل ViewTransition فقط وقتی در بلاک‌ها قابل استفاده‌اند که نسخه React همراه وردپرس به آن سطح برسد؛ این موضوع را در یادداشت‌های توسعه هر نسخه وردپرس بررسی کنید.

در پروژه‌های هدلس (وردپرس به‌عنوان بک‌اند و React یا Next.js در فرانت‌اند) وضعیت فرق دارد و می‌توانید همین حالا از React ۱۹.۳ استفاده کنید. یک نکته مشترک هم وجود دارد: Fragment Refs و الگوی گرفتن سند از خود عنصر، همان منطقی است که برای سازگاری بلاک‌ها با ویرایشگر iframe‌شده لازم است؛ جزئیات آن را در راهنمای Block API v3 و iframe اجباری ویرایشگر نوشته‌ایم. برای مرور تغییرات اخیر خود وردپرس هم مقاله وردپرس ۷.۱ «Mary Lou» را ببینید.

محدودیت‌ها: ViewTransition کجا مناسب نیست؟

• <ViewTransition> فقط در DOM کار می‌کند و برای React Native کاربرد ندارد.
• انیمیشن فقط برای Transitionها اجرا می‌شود؛ تایپ کردن در فیلد فرم و تغییرات فوری عمداً انیمیت نمی‌شوند.
• پشتیبانی کامل مرورگرها هنوز در حال یکسان شدن است؛ View Transition هم‌سندی از طریق Interop ۲۰۲۵ به وضعیت Baseline رسید و بهبودهای بیشتر و انتقال بین صفحات جزو اهداف Interop 2026 است. در مرورگرهای قدیمی‌تر، تغییرات بدون انیمیشن اعمال می‌شوند.
• انیمیشن زیاد می‌تواند برای کاربرانی که حرکت کمتر را ترجیح می‌دهند آزاردهنده باشد؛ با مدیا کوئری prefers-reduced-motion انیمیشن‌ها را محدود کنید.

از تجربه تیم siloow

تیم siloow در وب‌اپ‌های مدیریت تیم و انبار و فروش (POS) که با React ساخته، بخش زیادی از کد انیمیشن را با کتابخانه‌های جانبی و wrapperهای اضافه پیاده کرده بود. تجربه ما این است که بیشترین سود ViewTransition در صفحات فهرست و جزئیات است: باز شدن جزئیات یک سفارش یا محصول از روی کارت آن، بدون کتابخانه انیمیشن جدا. درس مهم دیگر RTL بود؛ تقریباً همه مثال‌های انیمیشن جهت‌دار در اینترنت برای چپ‌به‌راست نوشته شده‌اند و در رابط فارسی حس «برعکس» می‌دهند، پس جهت‌ها را از اول با dir صفحه هماهنگ کنید. Fragment Refs هم برای مدیریت فوکوس در منوهای کیبوردی، بدون div اضافه، کار ما را ساده کرد.

جمع‌بندی

• ری اکت ۱۹.۳ در ۹ سپتامبر ۲۰۲۶ منتشر شد و ViewTransition و Fragment Refs را پایدار کرد.
• ViewTransition فقط برای به‌روزرسانی‌های Transition انیمیشن اجرا می‌کند و با addTransitionType انیمیشن جهت‌دار می‌سازد.
• Fragment Refs متدهای فوکوس، رویداد و Observer را بدون wrapper در اختیار می‌گذارد.
• browser() کامپوننت‌های وابسته به مرورگر را از رندر سرور کنار می‌گذارد و Trusted Types حالا درست کار می‌کند.
• تغییر ناسازگاری اعلام نشده، اما رفتار Strict Mode و Transitionها را تست کنید.

اگر وب‌اپلیکیشن React یا Next.js دارید و برای ارتقا، بهینه‌سازی یا افزودن قابلیت‌های جدید به یک تیم فنی نیاز دارید، خدمات طراحی و توسعه وب‌اپلیکیشن siloow را ببینید. برای درک تفاوت سایت و وب‌اپ هم مقاله تفاوت سایت و وب اپلیکیشن را بخوانید و خبرهای بعدی را در مگ siloow دنبال کنید. اگر روی مک توسعه می‌دهید، راهنمای انتخاب مک برای برنامه‌نویسی هم به کارتان می‌آید.

منابع

• React 19.3 — React Blog
• React Blog (فهرست اطلاعیه‌ها)
• View Transition API — MDN
• Interop 2026 — web.dev

سوالات متداول درباره ری اکت ۱۹.۳