आधुनिक React: Server Components, use, useTransition, useOptimistic

server components, use के साथ promises पढ़ना, और React 19 के optimistic updates का अन्वेषण करें।

11 मिनट · 3 प्रश्न

React Server Components (RSC) client-server सीमा को फिर से खींचते हैं। एक server component केवल server पर चलता है: उसका code कभी client bundle तक नहीं पहुँचता, वह async हो सकता है, database या file system को सीधे पढ़ सकता है, और उसका output browser को एक serialized stream (RSC payload) के रूप में भेजा जाता है जिसे React client tree के साथ मिला देता है। बदले में, उसके पास कोई state नहीं, कोई effects नहीं, और browser तक कोई पहुँच नहीं होती: न useState, न useEffect, न event handlers। वह कभी client पर दोबारा render नहीं होता।

// Server component: never sent to the client.
export default async function NotesPage() {
  const notes = await db.notes.findAll();
  return (
    <ul>
      {notes.map((note) => (
        <li key={note.id}>{note.title}</li>
      ))}
    </ul>
  );
}

अंतःक्रियात्मकता client components में रहती है, जो फ़ाइल के शीर्ष पर 'use client' directive द्वारा चिह्नित होते हैं। यह directive "एक client component" को चिह्नित नहीं करता बल्कि एक सीमा को: वह module जो कुछ भी import करता है वह भी client की ओर चला जाता है। सीमा को पार करने वाले props serializable होने चाहिए: सादे objects, arrays, promises... लेकिन कभी भी सामान्य functions या class instances नहीं।

'use client';

import { useState } from 'react';

export function LikeButton({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count} likes
    </button>
  );
}

React 19 use पेश करता है, एक API जो किसी promise या किसी context का मान पढ़ता है। hooks के विपरीत, use को किसी condition या loop के भीतर call किया जा सकता है। किसी promise के साथ, यह component को resolution तक suspend कर देता है, निकटतम Suspense boundary पर निर्भर करते हुए। मुहावरेदार pattern: एक server component promise को await किए बिना बनाता है, उसे एक prop के रूप में पास करता है, और एक client component उसे use के साथ उपभोग करता है: server data की प्रतीक्षा किए बिना page को stream करना शुरू कर देता है।

import { use, Suspense } from 'react';

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map((c) => (
    <p key={c.id}>{c.text}</p>
  ));
}

function Page({ commentsPromise }) {
  return (
    <Suspense fallback={<Spinner />}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

अंतःक्रिया की ओर, useTransition एक update को गैर-ज़रूरी के रूप में चिह्नित करता है और isPending को उजागर करता है ताकि आप input को रोके बिना एक सूक्ष्म संकेतक दिखा सकें। useOptimistic network mutations के लिए इस जोड़ी को पूरा करता है: जब कोई async action चलता है तो आप तुरंत आशा की गई स्थिति प्रदर्शित करते हैं; जब action समाप्त होता है (सफलता या विफलता), तो React optimistic मान को हटा देता है और फिर से वास्तविक स्थिति दिखाता है, वह जो सत्य के स्रोत से आती है।

const [optimisticLikes, addOptimisticLike] =
  useOptimistic(likes, (count, delta) => count + delta);

function handleLike() {
  startTransition(async () => {
    addOptimisticLike(1);
    await saveLike();
    // At the end, React shows the real state again.
  });
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. एक server component क्या नहीं कर सकता?
   • async घोषित होना और किसी request का await करना
   • database को सीधे पढ़ना
   • useState और event handlers का उपयोग करना
   • children के रूप में client components को render करना
2. use API को hooks का कौन-सा नियम तोड़ने की अनुमति है?
   • किसी component के बाहर call होना
   • किसी condition या loop के भीतर call होना
   • module के किसी early return के बाद call होना
   • किसी class के भीतर call होना
3. जब async action समाप्त होती है तो useOptimistic मान का क्या होता है?
   • यह component की स्थायी state बन जाती है
   • यह हटा दी जाती है और वास्तविक state फिर से संभाल लेती है
   • यह वास्तविक state के साथ मिला दी जाती है
   • यह अगले manual render तक रखी जाती है