معرفی نسخه جدید React 19.2 و قابلیت‌های مهم آن

هم‌اکنون نسخه‌ی React 19.2 حالا روی npm در دسترس می‌باشد!
این سومین نسخه‌ای است که در یک سال اخیر منتشر شده؛ بعد از React 19 در دسامبر و React 19.1 در ژوئن.
در این پست، نگاهی می‌اندازیم به ویژگی‌های جدید React 19.2 و چند تغییر مهمی که همراه آن آمده است.

ویژگی‌های جدید در React 19.2

<Activity />
useEffectEvent
cacheSignal
Performance Tracks

ویژگی‌های جدید در React DOM

• Partial Pre-rendering (رندر جزئی پیش‌ساخته)

تغییرات مهم

• Batching Suspense Boundaries for SSR (بهبود مدیریت Suspense در SSR)
• پشتیبانی از Web Streams در Node برای SSR
• نسخه ۶ از eslint-plugin-react-hooks
• به‌روزرسانی پیش‌فرض prefix مربوط به useId

ویژگی‌های جدید React

🔹 <Activity />

کامپوننت <Activity> به شما اجازه می‌دهد اپ خود را به چند «فعالیت» جدا تقسیم کنید که React بتواند هر کدام را کنترل یا در اولویت قرار بدهد.

قبل از این، معمولاً برای نمایش یا پنهان کردن بخش‌هایی از اپ از رندر شرطی استفاده می‌کردیم:

{isVisible && <Page />} 

اما حالا می‌توان چنین نوشت:

<Activity mode={isVisible ? 'visible' : 'hidden'}>  <Page /> </Activity> 

در React 19.2، کامپوننت Activity دو حالت دارد:

• hidden: محتوای داخلی رو پنهان می‌کنه، افکت‌ها رو unmount می‌کنه و همه‌ی آپدیت‌ها رو تا زمانی که React کار دیگه‌ای نداشته باشه، عقب می‌اندازه.
• visible: محتوای داخلی رو نشون می‌ده، افکت‌ها رو mount می‌کنه و آپدیت‌ها طبق معمول انجام می‌شن.

به زبان ساده، این یعنی می‌توانید بخش‌هایی از اپ را «پیش‌نمایش» یا «در حالت پنهان» رندر کنید، بدون اینکه روی عملکرد قسمت‌های قابل مشاهده تأثیری بگذارد.

💡 کاربردهای Activity

با استفاده از Activity می‌توانید:

• بخش‌هایی از اپ را که کاربر احتمالاً قراره بهش سر بزند از قبل رندر کنید.
• حالت (state) بخش‌هایی که کاربر از آن خارج شده را حفظ کنید.

این باعث می‌شود ناوبری‌ها سریع‌تر گردند. چون داده‌ها، CSS و تصاویر در پس‌زمینه بارگذاری می‌شوند.
همچنین، وقتی کاربر برمی‌گردد به صفحه‌ی قبلی، به طور مثال فیلدهای ورودی پرشده باقی می‌مانند.

تیم React اعلام کرده در آینده قراره mode‌های بیشتری به Activity اضافه شود تا برای سناریوهای مختلف کاربرد داشته باشند.

برای دیدن نمونه‌کدها و جزئیات بیشتر، می‌توانید به مستندات Activity در سایت React سر بزنید.

useEffectEvent

یکی از الگوهای رایج در استفاده از useEffect این است که بخواهیم کد برنامه را در پاسخ به یک نوع «رویداد» از یک سیستم خارجی مطلع کنیم.
به‌عنوان مثال، وقتی یک اتاق چت به سرور متصل می‌شود، ممکن است بخواهید یک اعلان (notification) نمایش داده شود:

function ChatRoom({ roomId, theme }) {
  useEffect(() => {    
  	const connection = createConnection(serverUrl, roomId);
  	connection.on('connected', () => {
  	showNotification('Connected!', theme);
  	});
  	connection.connect();
  	return () => {
  	  connection.disconnect();
  	};
  }, [roomId, theme]); 
// ... 

مشکل این کد در این است که هر تغییری در مقادیری که داخل چنین رویدادی استفاده می‌شوند، باعث می‌شود کل Effect مجدداً اجرا شود.
برای مثال، تغییر در مقدار theme موجب می‌شود اتاق چت دوباره به سرور متصل شود.
این رفتار برای مقادیری که واقعاً در منطق Effect دخیل هستند (مثل roomId) منطقی است، اما برای مقادیری مثل theme نه.

برای حل این مسئله، بسیاری از توسعه‌دهندگان معمولاً قانون وابستگی‌های lint را غیرفعال می‌کنند و وابستگی ناخواسته را از آرایه حذف می‌کنند. اما این کار می‌تواند در آینده باعث بروز خطا شود، زیرا linter دیگر قادر نیست وابستگی‌ها را به‌درستی کنترل کند، مخصوصاً زمانی که منطق Effect تغییر کند.

راه‌حل: useEffectEvent

با استفاده از useEffectEvent می‌توانید بخش مربوط به «رویداد» را از خود Effect جدا کنید:

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {    
    showNotification('Connected!', theme);  
  });  
  useEffect(() => {    
  	const connection = createConnection(serverUrl, roomId);    
  	connection.on('connected', () => {      
  	  onConnected();    
  });    
  connection.connect();    
  return () => connection.disconnect();  
  }, [roomId]);  // ✅ All dependencies declared (Effect Events aren't dependencies)
// ...

درست مانند رویدادهای DOM، Effect Event همیشه به جدیدترین props و state دسترسی دارد.

توجه داشته باشید که نباید Effect Event را در آرایه‌ی وابستگی‌ها قرار دهید.
برای پشتیبانی از این قابلیت، لازم است به نسخه‌ی جدید eslint-plugin-react-hooks ارتقا دهید تا linter به‌صورت خودکار آن‌ها را به‌عنوان وابستگی شناسایی نکند.
همچنین، Effect Event باید در همان کامپوننت یا Hookی تعریف شود که از آن Effect استفاده می‌کند؛ این محدودیت‌ها توسط linter بررسی می‌شوند.

نکته: چه زمانی از useEffectEvent استفاده کنیم؟

از useEffectEvent زمانی استفاده کنید که تابعی دارید که ماهیتاً یک رویداد است اما از داخل Effect فراخوانی می‌شود (نه به‌صورت مستقیم از یک تعامل کاربری).
به عبارت دیگر، اگر تابعی تنها برای واکنش به اتفاقی درون Effect ایجاد شده، می‌تواند یک Effect Event باشد.

اما نیازی نیست همه‌ی توابع را داخل useEffectEvent قرار دهید یا فقط برای رفع خطاهای lint از آن استفاده کنید. این کار می‌تواند منجر به خطاهای منطقی شود.

برای درک عمیق‌تر تفاوت بین رویدادها و افکت‌ها، می‌توانید مستند رسمی React را با عنوان “Separating Events from Effects” مطالعه کنید.

cacheSignal

React Server Components

تابع cacheSignal مخصوص React Server Components است و در محیط کلاینت (Client Components) کاربردی ندارد.

cacheSignal به شما اجازه می‌دهد تشخیص دهید چه زمانی دوره‌ی اعتبار یک cache() به پایان می‌رسد.

import { cache, cacheSignal } from 'react'; 

const dedupedFetch = cache(fetch); 
async function Component() {  
	await dedupedFetch(url, { signal: cacheSignal() }); 
}

با این کار می‌توانید زمانی که نتیجه دیگر در کش (cache) استفاده نمی‌شود، کارهای ناتمام را متوقف کرده یا منابع را پاک‌سازی کنید.
به‌عنوان مثال، زمانی که یکی از شرایط زیر رخ دهد:

• React عملیات رندر را با موفقیت به پایان رسانده است.
• فرآیند رندر متوقف (abort) شده است.
• رندر با خطا مواجه شده است.

در چنین موقعیت‌هایی، cacheSignal کمک می‌کند تا درخواست‌ها یا عملیات غیرضروری را خاتمه دهید و از مصرف منابع جلوگیری کنید.

برای جزئیات بیشتر، می‌توانید به مستندات رسمی cacheSignal در سایت React مراجعه کنید.

Performance Tracks

در نسخه‌ی React 19.2، مجموعه‌ی جدیدی از Trackهای سفارشی (Custom Tracks) به ابزار Chrome DevTools Performance اضافه شده است.

این Trackها اطلاعات دقیق‌تری درباره‌ی عملکرد (Performance) اپلیکیشن React شما در زمان اجرا ارائه می‌دهند و به شما کمک می‌کنند تا بهتر متوجه شوید کدام بخش از برنامه زمان‌بر یا پرهزینه است.

به‌طور خلاصه، این قابلیت جدید دید بهتری نسبت به چرخه‌های رندر، به‌روزرسانی‌ها، و تعامل بین مؤلفه‌های React فراهم می‌کند.

Performance Tracks در React 19.2

مستندات رسمی React Performance Tracks تمام جزئیات مربوط به این قابلیت را توضیح می‌دهد، اما در اینجا نگاهی کلی به دو بخش اصلی آن داریم:

⚛ Scheduler Track

Scheduler Track نشان می‌دهد که React در هر لحظه روی چه کاری تمرکز دارد و آن کار در چه سطحی از اولویت انجام می‌شود.

به‌عنوان مثال:

• وظایف مربوط به تعاملات کاربر در سطح اولویت blocking قرار دارند.
• به‌روزرسانی‌هایی که درون startTransition انجام می‌شوند، در سطح اولویت transition اجرا می‌شوند.

در هر Track، می‌توانید نوع کاری که React در حال انجام آن است را مشاهده کنید — برای نمونه:
رویدادی که باعث برنامه‌ریزی یک به‌روزرسانی شده، و زمانی که رندر مربوط به آن به‌روزرسانی انجام شده است.

علاوه بر این، اطلاعات مفیدی نمایش داده می‌شود از جمله:

• زمانی که یک به‌روزرسانی در انتظار اولویت بالاتری متوقف شده است.
• زمانی که React منتظر paint شدن صفحه است تا کار را ادامه دهد.

به‌صورت کلی، Scheduler Track به شما کمک می‌کند درک بهتری از نحوه‌ی تقسیم کار توسط React بین اولویت‌های مختلف و ترتیب انجام آن‌ها پیدا کنید.

برای مشاهده‌ی جزئیات بیشتر، می‌توانید به مستندات رسمی Scheduler Track مراجعه کنید.

⚛ Components Track

Components Track درختی از کامپوننت‌ها را نشان می‌دهد که React در حال رندر کردن یا اجرای افکت‌های آن‌ها است.

در این بخش برچسب‌هایی مانند:

• Mount برای زمانی که یک کامپوننت یا افکت جدید mount می‌شود.
• Blocked برای زمانی که رندر به‌دلیل انجام کارهایی خارج از React متوقف شده

نمایش داده می‌شوند.

Components Track به شما کمک می‌کند بفهمید چه زمانی یک کامپوننت رندر یا افکت‌هایش اجرا شده‌اند، و انجام آن کار چقدر زمان برده است — بنابراین ابزار بسیار مفیدی برای شناسایی مشکلات عملکردی (performance bottlenecks) محسوب می‌شود.

برای دیدن توضیحات کامل‌تر، می‌توانید به مستندات رسمی Components Track مراجعه کنید.

ویژگی‌های جدید React DOM

🧩 Partial Pre-rendering

در نسخه‌ی React 19.2 قابلیت جدیدی معرفی شده که به شما امکان می‌دهد بخشی از برنامه را از قبل رندر کنید و سپس در آینده رندر آن را ادامه دهید (resume).

این قابلیت با نام Partial Pre-rendering شناخته می‌شود و به شما اجازه می‌دهد بخش‌های استاتیک اپلیکیشن را از پیش رندر کرده و از طریق CDN ارائه دهید، و سپس رندر پوسته‌ی اصلی (shell) را ادامه دهید تا محتواهای پویا (dynamic) بعداً به آن اضافه شوند.

نحوه‌ی استفاده از Partial Pre-rendering

برای اینکه بتوانید برنامه‌ای را از قبل رندر کنید و بعداً ادامه‌ی آن را انجام دهید، ابتدا باید از تابع prerender استفاده کنید و به آن یک AbortController بدهید:

const { prelude, postponed } = await prerender(<App />, {  signal: controller.signal, }); 

// Save the postponed state for later
await savePostponedState(postponed); 
// Send prelude to client or CDN

سپس می‌توانید خروجی اولیه‌ی prelude (پوسته‌ی ابتدایی برنامه) را به کاربر ارسال کنید و بعداً با استفاده از تابع resume ادامه‌ی رندر را انجام دهید تا خروجی به‌صورت SSR stream تولید شود:

const postponed = await getPostponedState(request); 
const resumeStream = await resume(<App />, postponed);

// Send stream to client.

یا می‌توانید از تابع resumeAndPrerender استفاده کنید تا خروجی HTML استاتیک برای SSG (Static Site Generation) دریافت کنید:

const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(<App />, postponedState); 

// Send complete HTML prelude to CDN.

APIهای مرتبط با این قابلیت

مستندات رسمی React برای این APIها شامل جزئیات زیر است:

react-dom/server

• resume: برای Web Streams
• resumeToPipeableStream: برای Node Streams

react-dom/static

• resumeAndPrerender: برای Web Streams
• resumeAndPrerenderToNodeStream: برای Node Streams

علاوه بر این، APIهای جدید prerender حالا یک وضعیت postponed بازمی‌گردانند که باید به تابع‌های resume یا resumeAndPrerender ارسال شود تا ادامه‌ی رندر انجام گیرد.

🧠 تغییرات مهم (Notable Changes)

Batching Suspense Boundaries برای SSR

در نسخه‌های قبلی، یک باگ رفتاری وجود داشت که باعث می‌شد مرزهای Suspense (Suspense Boundaries) در رندر سمت سرور (SSR) و رندر سمت کلاینت به‌صورت متفاوت نمایش داده شوند.

در نسخه‌ی React 19.2 این مشکل برطرف شده است. اکنون React، نمایش (reveal) مرزهای Suspense در رندر سمت سرور را برای مدت کوتاهی به‌صورت دسته‌ای (batch) انجام می‌دهد تا محتوای بیشتری به‌صورت هم‌زمان نمایش داده شود و رفتار آن با رندر سمت کلاینت هماهنگ‌تر باشد.

پیش از این، در هنگام رندر استریم‌شده‌ی سمت سرور (Streaming SSR)، محتوای مربوط به Suspense بلافاصله جایگزین Fallback‌ها می‌شد.

اما در React 19.2، مرزهای Suspense برای مدت زمان کوتاهی به‌صورت دسته‌ای (batch) فاش می‌شوند تا چندین بخش از محتوا بتوانند هم‌زمان نمایش داده شوند.

این تغییر نه‌تنها باعث هماهنگی بیشتر بین رندر سمت سرور و سمت کلاینت می‌شود، بلکه اپلیکیشن‌ها را برای پشتیبانی از تگ جدید <ViewTransition> در حالت SSR آماده می‌کند.
با نمایش هم‌زمان حجم بیشتری از محتوا، انیمیشن‌ها می‌توانند به‌صورت گروهی اجرا شوند و از ایجاد زنجیره‌های متعدد از انیمیشن‌های کوتاه‌مدت جلوگیری شود.

نکته

React از مجموعه‌ای از الگوریتم‌های هوشمند (heuristics) استفاده می‌کند تا مطمئن شود تاخیر در نمایش محتوا (throttling) تأثیری بر شاخص‌های کلیدی عملکرد (Core Web Vitals) و رتبه‌بندی جستجو ندارد.

برای مثال، اگر زمان کل بارگذاری صفحه به ۲.۵ ثانیه نزدیک شود (که مرز «خوب» برای معیار LCP محسوب می‌شود)، React بلافاصله batching را متوقف کرده و محتوا را فوراً نمایش می‌دهد تا این تاخیر باعث افت امتیاز عملکرد نشود.

SSR: پشتیبانی از Web Streams در Node.js

در نسخه‌ی React 19.2، پشتیبانی از Web Streams برای رندر استریم‌شده (Streaming SSR) در محیط Node.js اضافه شده است.

قابلیت‌های جدید شامل موارد زیر هستند:

• renderToReadableStream اکنون برای Node.js در دسترس است.
• prerender نیز در Node.js قابل استفاده است.
• APIهای جدید resume و resumeAndPrerender نیز برای Node اضافه شده‌اند.

⚠️ نکته مهم: استفاده از Node Streams در محیط Node.js

اگرچه Web Streams حالا پشتیبانی می‌شوند، اما در محیط Node.js توصیه می‌شود از APIهای مخصوص Node Streams استفاده کنید:

• renderToPipeableStream
• resumeToPipeableStream
• prerenderToNodeStream
• resumeAndPrerenderToNodeStream

دلیل این توصیه این است که Node Streams به‌مراتب سریع‌تر از Web Streams هستند و از طرفی Web Streams به‌صورت پیش‌فرض از فشرده‌سازی (compression) پشتیبانی نمی‌کنند.
این موضوع ممکن است باعث شود برخی توسعه‌دهندگان به‌طور ناخواسته از مزایای کامل رندر استریم‌شده محروم بمانند.

eslint-plugin-react-hooks نسخه ۶

به‌صورت هم‌زمان با React 19.2، نسخه‌ی جدیدی از eslint-plugin-react-hooks نیز منتشر شده است.

ویژگی‌های جدید آن شامل موارد زیر است:

• فعال‌سازی پیکربندی تخت (flat config) به‌صورت پیش‌فرض در preset توصیه‌شده.
• افزودن پشتیبانی اختیاری برای قوانین مبتنی بر React Compiler.

اگر می‌خواهید همچنان از تنظیمات قدیمی استفاده کنید، کافی است preset خود را به نسخه‌ی legacy تغییر دهید:

- extends: ['plugin:react-hooks/recommended'] 
+ extends: ['plugin:react-hooks/recommended-legacy'] 

برای مشاهده‌ی فهرست کامل قوانین فعال‌شده توسط کامپایلر، به مستندات linter مراجعه کنید.
همچنین، changelog رسمی eslint-plugin-react-hooks شامل تمام تغییرات این نسخه است.

تغییر در پیش‌فرض useId prefix

در نسخه‌ی React 19.2، مقدار پیش‌فرض prefix تولیدشده توسط useId از :r: (در React 19.0) یا «r» (در React 19.1) به _r_ تغییر کرده است.

هدف اولیه از استفاده از کاراکترهای خاصی که در CSS Selector معتبر نیستند این بود که احتمال تداخل با شناسه‌هایی که توسط کاربر تعریف می‌شوند کاهش یابد.

اما برای پشتیبانی از قابلیت جدید View Transitions، لازم است شناسه‌هایی که توسط useId ساخته می‌شوند برای ویژگی‌های view-transition-name و همچنین نام‌های XML 1.0 معتبر باشند.
به همین دلیل، React اکنون از پیشوند ساده‌تر و سازگارتر _r_ استفاده می‌کند.

مشاهده changelog در داکیومنت رسمی React