React Labs: View Transitions وActivity

المنشور اتكتب يوم 23 أبريل 2025 من Ricky Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن في حزمة react@experimental وreact‑dom@experimental:

• View Transitions: ببساطة بتلف الـ UI جوا <ViewTransition> علشان تشغّل أنيميشنات باستخدام API جديد اسمه startViewTransition. ممكن تفعلها لما تستخدم startTransition أو useDeferredValue أو <Suspense>. والـ CSS ممكن يتحكم في شكل الحركة باستخدام الـ pseudo-selectors زي ::view-transition-old(*) و::view-transition-new(*).
• Activity: الكومبوننت دي بتحافظ على حالة الجزء المخفي من الصفحة من غير ما يكرّر الـ render أو يضيع الستيت. الكود بيبقى كده: <Activity mode={isVisible ? 'visible' : 'hidden'}>. لو مخفي، بيفصل الـ effects لكن بيحتفظ بالستيت علشان لو المستخدم رجع تاني يبقى زي ما سيبه.

وكمان شغالين على شوية حاجات تانية:

• مقاييس مباشرة في Performance Profiler.
• المترجم بيدخل dependencies بتاعة useEffect أوتوماتيك.
• Extension للمحرر (IDE) يعتمد على الكومبايلر للكشف الأذكى عن الأخطاء.
• ref للـ Fragment علشان تجمع أكتر من عنصر DOM.
• أنيميشن بالإيماءات (زي السحب للفتح).
• API جديد للـ external stores باستخدام use(store).

مثال: View Transition بسيط

import { unstable_ViewTransition as ViewTransition } from 'react';

export default function App({ url }) {
  return (
    
      {url === '/' ?  : }
    
  );
}

مثال: سنّ الحالة باستخدام Activity

import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from 'react';

export default function App({ url }) {
  return (
    
      
        
      
      {url !== '/' && }
    
  );
}

الميزات دي متاحة دلوقتي في النسخة التجريبية، وممكن كل حاجة تتغير في الآخر حسب الآراء والاستجابة المجتمعية.