React में 2 महत्वपूर्ण बदलाव: View Transitions और Activity

• React ने नई experimental features पेश की हैं
  • View Transitions स्मूद page transition animations को आसानी से लागू करने में मदद करता है
  • Activity UI को छिपाकर state को सुरक्षित रखते हुए performance optimization संभव बनाता है
• इसके अलावा automatic dependency handling, Fragment Refs, Concurrent Stores जैसी कई सुविधाओं पर भी काम चल रहा है

View Transitions की मुख्य विशेषताएँ

• animation को लागू करने के लिए नए startViewTransition browser API का उपयोग किया जाता है
• <ViewTransition> से यह बताया जा सकता है कि किन elements को animate करना है, और startTransition, useDeferredValue, Suspense आदि को trigger के रूप में इस्तेमाल किया जा सकता है
• डिफ़ॉल्ट रूप से crossfade animation मिलता है, और इसे CSS से customize किया जा सकता है
• shared element transitions भी समर्थित हैं, जिससे एक ही name attribute वाले elements के बीच स्वाभाविक movement संभव होता है
• transition के कारण (cause) के अनुसार अलग animation तय करने के लिए addTransitionType API उपलब्ध है

Activity की मुख्य विशेषताएँ

• <Activity> के जरिए UI को छिपाकर state बनाए रखा जा सकता है, या ज़रूरत पड़ने पर prerendering की जा सकती है
• hidden mode में component unmount हो जाता है, लेकिन state सुरक्षित रहती है, और render priority कम हो जाती है
• page navigation के समय input values या state खोए बिना उन्हें restore किया जा सकता है
• आगे चलकर modal के लिए mode और memory बचाने के लिए state removal feature भी जोड़े जाने की योजना है
• server-side rendering (SSR) में भी Activity optimization behavior को support करता है

विकासाधीन अन्य सुविधाएँ

• React Performance Tracks

  • browser performance profiler में React के लिए custom tracks जोड़ने की सुविधा पर काम चल रहा है
  • अभी performance और Suspense integration से जुड़ी समस्याओं को हल किया जा रहा है

• automatic effect dependency handling

  • React compiler के जरिए useEffect dependencies को अपने-आप insert करके code को अधिक संक्षिप्त और समझने योग्य बनाने का लक्ष्य है
  • component lifecycle के बजाय Effect-केंद्रित सोच को बढ़ावा देने की कोशिश है

• Compiler IDE Extension

  • React Compiler पर आधारित IDE extension विकसित किया जा रहा है
  • code optimization, rule violation detection, और automatically inserted dependencies दिखाने जैसी कई सुविधाएँ देने की योजना है

• Fragment Refs

  • कई DOM elements को एक ही Ref से manage करने के लिए Fragment Ref feature पर शोध चल रहा है
  • इसका उद्देश्य DOM API calls को आसान बनाना है

• Gesture Animations

  • View Transition को touch gesture-based animations तक बढ़ाने पर शोध किया जा रहा है
  • continuous movement, incomplete actions की handling, और नए DOM व पुराने DOM के inversion जैसी समस्याओं को हल किया जा रहा है

• Concurrent Stores

  • external stores को React के साथ concurrent तरीके से स्वाभाविक रूप से integrate करने का लक्ष्य है
  • useSyncExternalStore की सीमाओं से आगे बढ़ते हुए नया use(store) style API विकसित किया जा रहा है