2024 में React ट्रेंड्स

Astro (React के साथ)

• पिछले साल Astro, Gatsby के उत्तराधिकारी के रूप में सामने आया
• Astro मुख्य रूप से static websites के लिए जाना जाता था, लेकिन web applications और API endpoints के लिए भी लोकप्रिय हो रहा है
• Astro से बनी websites server पर rendering संभालती हैं, इसलिए default रूप से performance बेहतर होती है
• Astro को React या किसी UI framework के बिना भी इस्तेमाल किया जा सकता है, और ".astro" files के जरिए UI components बनाए जा सकते हैं
• React के साथ इस्तेमाल करने पर browser को सिर्फ HTML और CSS भेजे जाते हैं, और JavaScript केवल जरूरत पड़ने पर दिया जाता है
  • "fast-by-default"

Authentication (React में)

• कई startup और open source projects की वजह से React में authentication फिर से दिलचस्प बन गया है
• Firebase Authentication, Auth0, Passport.js, NextAuth के अलावा authentication के नए विकल्प भी सामने आए हैं
• Supabase, open source Firebase alternative के रूप में कई तरह की सुविधाएँ देता है
• Clerk केवल authentication पर फोकस करता है, और React में user registration और login को आसान बनाता है
• Lucia, Astro के साथ लोकप्रिय हुआ है, और open source तथा database के साथ एक स्पष्ट abstraction layer प्रदान करता है

tRPC के साथ full-stack React applications

• tRPC type-safe full-stack applications के लिए मेरा पसंदीदा बन गया है
• जहाँ Prisma backend application के database model से types generate करता है, वहीं tRPC backend से frontend की API layer तक type safety बनाए रखता है
• remote procedure calls की अपनी मूल विशेषता के जरिए tRPC, client application को सामान्य functions call करके backend API call करने देता है
• tRPC, JSON-RPC specification और HTTP transport layer का उपयोग करता है, और react-query के साथ मिलकर efficient caching और request batching को support करता है

React Server Components और Next.js

• React Server Components(RSC) को पिछले साल Next 13.4 के जरिए community द्वारा implement और adopt किया गया
• RSC web development में एक बड़ा paradigm shift ला रहा है
• RSC शायद React Hooks से भी बड़ा बदलाव साबित हो सकता है, क्योंकि यह बड़े applications में React components के इस्तेमाल के तरीके पर फिर से सोचने को मजबूर करता है
• RSC का इस्तेमाल करने पर browser में भेजे जाने (या stream होने) से पहले server के component level पर data fetching की जा सकती है, जिससे performance बेहतर होती है
• सोचने वाली बात यह है कि जहाँ client-server communication के लिए tRPC और react-query इस्तेमाल हो रहे हों, वहाँ अगर RSC server पर data fetch करे तो उसकी भूमिका क्या होगी। इस साल इसके क्या नतीजे निकलते हैं, यह देखने का इंतज़ार है

SPA React के लिए TanStack Router

• Tanner Linsley का कहना है कि SPA(Single Page Applications) अभी खत्म नहीं हुए हैं
• react-query और react-table बनाने में शामिल रहे उन्होंने अब नई library TanStack Router पेश की है
• कई developers built-in router के साथ Next.js और Remix (जो internally सबसे लोकप्रिय React router का उपयोग करता है और RSC implementation पर भी ध्यान देता है) जैसे meta-frameworks अपना रहे हैं, लेकिन अभी तक किसी ने React के लिए शुरुआत से type-safe router नहीं बनाया था
• TanStack Router, React ecosystem में एक महत्वपूर्ण खाली जगह को भरता है, और TypeScript support वाला नया router है
• यह router developers को type-safe तरीके से URL state पढ़ने और लिखने देता है

Vercel, React को Edge की ओर धकेल रहा है

• Vercel वह कंपनी है जो Next.js को आगे बढ़ा रही है, जो RSC movement में गहराई से शामिल है
• कई core developers के Vercel में शामिल होने की वजह से बहुत से developers मानते हैं कि Vercel ही React की driving force है
• Vercel, RSC के जरिए React की सीमाएँ बढ़ाने के साथ-साथ, Next.js के माध्यम से React applications को efficiently deploy करने और users तक पहुँचाने के तरीकों का भी विस्तार कर रहा है
• Vercel पर Next application इस्तेमाल करने से edge runtime के जरिए React components को stream किया जा सकता है
• Edge पर इस तरह React components को stream करना performance पर बड़ा असर डालता है
• PlanetScale जैसे globally replicated serverless DB के साथ मिलकर यह भविष्य में application hosting के तरीकों (या बेहतर location) को लेकर एक दिलचस्प trend बन सकता है

React के bundlers: Turbopack बनाम Vite

• Turbopack, Webpack का उत्तराधिकारी है। यह अभी production के लिए तैयार नहीं है, लेकिन Next.js applications में local development के लिए इस्तेमाल किया जा सकता है
• पहले भी bundlers के पास बहुत सारी जिम्मेदारियाँ थीं, लेकिन client और server components को development और production environments में जोड़ने के trend की वजह से अब एक नए तरह के bundler की जरूरत है
• व्यक्तिगत रूप से मैं Vite और उसकी server-side capabilities को Next.js में देखना चाहता था, लेकिन जहाँ Remix, दूसरे meta-frameworks और SPA ने Vite को अपनाया, वहीं Vercel/Next ने Turbopack पर काम शुरू कर दिया

React Compiler (जिसे React Forget के नाम से जाना जाता है)

• React developers, useCallback, useMemo, memo के इस्तेमाल को लेकर असंतुष्ट हैं
• React टीम (काफी शांति से) React Compiler नाम का एक compiler विकसित कर रही है, जो React applications में पूरी memoization को automate करेगा
• उम्मीद है कि functions (useCallback), values (useMemo), और components (memo) को memoize करने की manual process आगे चलकर खत्म हो जाएगी
• React इन सबको memoize करके यह सुनिश्चित करेगा कि अगली rendering में सब कुछ फिर से calculate न करना पड़े
• React Compiler, इस manual memoization को automate करके React applications की performance बेहतर करेगा
• संभवतः इसका ऐलान React 19 और React Conf 2024 जैसे इवेंट्स में होगा

Biome

• ESLint और Prettier की configuration और उनके आपसी interaction को लेकर असंतोष रहा है, और Biome (पूर्व Rome) इसे बदलने के लिए एक तेज़ और integrated toolchain solution देना चाहता है
• एक और विकल्प oxc(JavaScript Oxidation Compiler) है, जो एक all-in-one toolchain alternative के रूप में काफी promising लगता है

React के लिए Headless UI libraries

• React developers हर साल अपनी पसंदीदा UI library बदलने की प्रवृत्ति रखते हैं
• कुछ साल पहले Material UI इस्तेमाल होता था, फिर Semantic UI/Ant Design, उसके बाद Chakra UI, फिर Mantine UI, और पिछले साल shadcn/UI पर आकर बात ठहरी
• पहले के ये सभी चुनाव मुख्य रूप से design और usability की इच्छा से प्रेरित थे, लेकिन shadcn/UI के साथ कुछ बातें अलग हुईं
• shadcn/UI, Tailwind को पूरी तरह अपनाने वाली पहली लोकप्रिय UI library है, जिसमें components को custom design किया जाता है
• Headless UI libraries का trend यह है कि वे design के बिना functionality और accessibility प्रदान करती हैं
• Styled Components या Emotion जैसे CSS-in-JS solutions client/browser पर भार डालते हैं, इसलिए StyleX जैसे नए CSS-in-JS solutions इस समस्या को utility-first CSS में compile करके कम करते हैं

[firea32]

https://github.com/facebook/react-strict-dom
react-strict-dom का भी इंतज़ार है।
अगर यह ठीक से आ गया, तो लगता है कि यह react-native-web की जगह ले सकता है।

[greenhead]

React Forget का बहुत इंतज़ार है