React 19

 (github.com/facebook)
2 पॉइंट द्वारा GN⁺ 2024-12-06 | 1 टिप्पणियां | WhatsApp पर शेयर करें

19.0.0 (5 दिसंबर 2024)

नई सुविधाएँ

React
  • Actions: startTransition अब asynchronous functions को स्वीकार कर सकता है। इन functions को "Actions" कहा जाता है, और ये background में state को update करते हैं तथा UI को एक साथ commit करते हैं। Actions asynchronous requests जैसे side effects चला सकते हैं, और Transition पूरा होने से पहले काम के पूरा होने का इंतज़ार करते हैं।
  • useActionState: Transition के भीतर Actions को क्रमबद्ध करने और state तक पहुँचने के लिए एक नया hook। यह initial state और reducer को स्वीकार करता है।
  • useOptimistic: Transition के चलने के दौरान state को update करने के लिए एक नया hook। Transition पूरा होने पर state नए value से update हो जाती है।
  • use: rendering के समय resources पढ़ने के लिए एक नया API। यह Promise या Context को स्वीकार करता है, और Promise दिए जाने पर value resolve होने तक suspend करता है।
  • ref को prop के रूप में उपयोग: अब forwardRef की ज़रूरत के बिना ref को prop के रूप में इस्तेमाल किया जा सकता है।
  • Suspense sibling pre-warming: जब कोई component suspend होता है, तो React सबसे नज़दीकी Suspense boundary के fallback को तुरंत commit करता है।
React DOM client
  • <form> action prop: Form Actions अपने-आप forms को manage करते हैं और useFormStatus के साथ integrate होते हैं। सफलता पर form अपने-आप reset हो जाता है।
  • document metadata support: document metadata tags को components से native तरीके से render किया जा सकता है।
  • stylesheet support: Suspense boundary के content को दिखाने से पहले client के <head> में stylesheets insert की जाती हैं।
  • asynchronous script support: component tree में कहीं से भी asynchronous scripts render की जा सकती हैं।
React DOM server
  • prerender और prerenderToNodeStream API जोड़े गए: static site generation के लिए APIs, जिन्हें Node.js streams और web streams जैसे streaming environments में काम करने के लिए डिज़ाइन किया गया है।
React server components
  • RSC features: directives, server components, और server functions अब stable हो गए हैं। server components शामिल करने वाली libraries अब React 19 को peer dependency के रूप में target कर सकती हैं।

Deprecated होने वाली चीज़ें

  • element.ref access: element.props.ref को प्राथमिकता देते हुए element.ref access को deprecated किया गया है।
  • react-test-renderer: React 19 में react-test-renderer deprecation warning log करता है और web usage के लिए concurrent rendering पर switch करता है।

मुख्य बदलाव

React
  • नया JSX transform अनिवार्य: bundle size बेहतर करने और React import किए बिना JSX इस्तेमाल करने के लिए नया JSX transform आवश्यक है।
  • rendering errors दोबारा throw नहीं होते: यदि error को Error Boundary नहीं पकड़ती, तो उसे window.reportError में report किया जाता है।
  • propTypes हटाए गए: propTypes का उपयोग अब चुपचाप ignore किया जाता है। TypeScript पर migration की सिफारिश की जाती है।
  • functions के defaultProps हटाए गए: इसकी जगह ES6 default parameters का उपयोग किया जा सकता है।
  • string refs हटाए गए: string refs के उपयोग को ref callbacks में migrate करना होगा।
React DOM
  • react-dom/test-utils हटाया गया: act को react-dom/test-utils से react में move किया गया है। बाकी utilities हटा दी गई हैं।
  • ReactDOM.render, ReactDOM.hydrate हटाए गए: इन्हें concurrent rendering के लिए ReactDOM.createRoot और ReactDOM.hydrateRoot से replace किया गया है।

उल्लेखनीय बदलाव

React
  • <Context> को provider के रूप में उपयोग: <Context.Provider> की जगह <Context> को provider के रूप में render किया जा सकता है।
  • custom element support: React 19 सभी custom element tests पास करता है।
  • StrictMode changes: useMemo और useCallback पहली rendering के memoization result को reuse करते हैं।
React DOM
  • hydration errors के लिए diff: mismatch होने पर, React 19 mismatched content के differences सहित एक single error log करता है।

TypeScript बदलाव

  • implicit returns निषिद्ध: refs अब केवल cleanup functions स्वीकार करते हैं। implicit return अब error पैदा करेगा।
  • useRef का initial argument आवश्यक: initial argument अब अनिवार्य है।
  • कड़ा ReactElement typing: React elements के props अब any की जगह default रूप से unknown होते हैं।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-12-06
Hacker News राय

  • कुछ लोगों का मानना है कि React का उपयोग करके scalable apps बनाना संभव भी है और मज़ेदार भी

    • उनका सोचना है कि TS support और community libraries की वजह से इन्हें आसानी से बनाया और scale किया जा सकता है
    • वे यह नहीं समझ पाते कि नई features लोगों को डराती क्यों हैं
    • एक राय यह भी है कि Jetpack Compose और Swift UI ने React से प्रेरणा ली है
    • यह सवाल भी उठता है कि क्या पहले jQuery या plain JS से बड़े पैमाने के web apps बनाना सच में आनंददायक था

  • React की नई release को लेकर सकारात्मक राय है, लेकिन चिंता भी है कि beginners के लिए शुरुआत करना कठिन हो सकता है

    • React अब भी एक बेहतरीन framework है और इस release में सुधार दिखते हैं
    • आलोचना React से ज़्यादा, कुल मिलाकर frontend development की दिशा को लेकर है

  • कुछ लोगों का मानना है कि client-side frameworks की जटिलता बढ़ती जा रही है

    • उन्हें लगता है कि backend, frontend, DevOps stack आदि हर जगह complexity बढ़ रही है

  • नई release में 'ref as a prop' feature जोड़े जाने को सकारात्मक माना गया है, क्योंकि इससे forwardRef की ज़रूरत नहीं रहती

  • Redux की जगह Recoil clone Jotai का ज़िक्र किया गया है, और कहा गया है कि यह React 19 के साथ compatible है

    • उनका मानना है कि frontend complexity के बीच कोई और state manager रुकावट बन सकता है

  • कुछ लोग चाहते हैं कि 'use' API का नाम बदला जाए

    • उनका मानना है कि React hooks से पहली बार परिचित होने वाले लोगों के लिए यह भ्रम पैदा कर सकता है

  • parallel suspense समस्या को हल करने के लिए release में देरी किए जाने को सकारात्मक रूप से देखा गया है

  • यह सवाल उठाया गया है कि क्या मौजूदा built-in hooks के आधार पर useActionState hook बनाया जा सकता है

  • standard web technologies के उपयोग को बढ़ावा देने वाली features और quality of life बेहतर करने वाली सुविधाएँ जोड़े जाने की सराहना की गई है

    • इस बात पर निराशा है कि suspense triggering के लिए अब भी framework support की ज़रूरत है
    • TanStack Query के ज़रिए suspense mechanism को समझने की कोशिश की गई, लेकिन सफलता नहीं मिली