useTransition

useTransition হলো একটি React হুক যা আপনাকে UI এর একটি অংশ ব্যাকগ্রাউন্ডে রেন্ডার করতে দেয়।

const [isPending, startTransition] = useTransition()

রেফারেন্স
- useTransition()
- startTransition(action)
ব্যবহারবিধি
সমস্যা সমাধান

রেফারেন্স

`useTransition()`

আপনার কম্পোনেন্টের একেবারে উপরের স্তরে useTransition কল করুন যাতে কিছু state আপডেটকে ট্রানজিশন হিসাবে চিহ্নিত করা যায়।

import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

নীচে আরো উদাহরণ দেখুন।

প্যারামিটারস

useTransition কোনো প্যারামিটার নেয় না।

রিটার্নস

useTransition একটি অ্যারে রিটার্ন করে যাতে ঠিক দুটি আইটেম থাকে:

১. isPending ফ্ল্যাগ যা আপনাকে জানায় যে একটি পেন্ডিং ট্রানজিশন আছে। ২. startTransition ফাংশন যা আপনাকে আপডেটগুলিকে ট্রানজিশন হিসাবে চিহ্নিত করতে দেয়।

`startTransition(action)`

useTransition দ্বারা রিটার্ন করা startTransition ফাংশনটি আপনাকে একটি আপডেটকে ট্রানজিশন হিসাবে চিহ্নিত করতে দেয়।

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

খেয়াল করুন

`startTransition` এ কল করা ফাংশনগুলিকে “অ্যাকশন” বলা হয়।

startTransition এ পাস করা ফাংশনটিকে “অ্যাকশন” বলা হয়। প্রথা অনুযায়ী, startTransition এর ভিতরে কল করা যেকোনো কলব্যাক (যেমন একটি কলব্যাক প্রপ) এর নাম action হওয়া উচিত অথবা “Action” সাফিক্স যুক্ত হওয়া উচিত:

function SubmitButton({ submitAction }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await submitAction();
        });
      }}
    >
      Submit
    </button>
  );
}

প্যারামিটারসমূহ

action: একটি ফাংশন যা এক বা একাধিক set ফাংশন কল করে কিছু state আপডেট করে। React action কে কোনো প্যারামিটার ছাড়াই তাৎক্ষণিকভাবে কল করে এবং action ফাংশন কলের সময় সিনক্রোনাসভাবে নির্ধারিত সব state আপডেটকে ট্রানজিশন হিসাবে চিহ্নিত করে। action এ যে কোনো অ্যাসিনক কলকে await করা হলে তা ট্রানজিশনে অন্তর্ভুক্ত হবে, তবে বর্তমানে await এর পরে যেকোনো set ফাংশনকে একটি অতিরিক্ত startTransition এ মোড়ানোর প্রয়োজন (সমস্যা সমাধান দেখুন)। ট্রানজিশন হিসাবে চিহ্নিত state আপডেটগুলি নন-ব্লকিং হবে এবং অনাকাঙ্ক্ষিত লোডিং ইন্ডিকেটর প্রদর্শন করবে না।

রিটার্নস

startTransition কিছু রিটার্ন করে না।

সতর্কতা

useTransition হল একটি হুক, তাই এটি কেবল কম্পোনেন্ট বা কাস্টম হুকের মধ্যে কল করা যেতে পারে। যদি অন্য কোনো স্থানে (যেমন, একটি ডেটা লাইব্রেরি থেকে) ট্রানজিশন শুরু করার প্রয়োজন হয়, তাহলে স্বতন্ত্র startTransition কল করুন।
যদি আপনি একটি স্টেটের সেট ফাংশনে অ্যাক্সেস পেয়ে থাকেন তবে আপনি একটি ট্রানজিশনে আপডেট wrap করতে পারেন। কোনো প্রপ বা কাস্টম হুক ভ্যালুর রেসপন্সে ট্রানজিশন শুরু করতে চাইলে, useDeferredValue ব্যবহার করার চেষ্টা করুন।
startTransition এ আপনি যে ফাংশন পাস করবেন তা তাৎক্ষণিকভাবে কল হবে, এবং এটি চালানোর সময় ঘটে যাওয়া সমস্ত state আপডেটকে ট্রানজিশন হিসাবে চিহ্নিত করবে। যদি আপনি setTimeout এ state আপডেট করার চেষ্টা করেন, উদাহরণস্বরূপ, তবে সেগুলি ট্রানজিশন হিসাবে চিহ্নিত হবে না।
কোনো async request এর পরে state আপডেট করতে হলে আপনাকে সেগুলিকে আরেকটি startTransition এ wrap করতে হবে যাতে সেগুলি ট্রানজিশন হিসাবে চিহ্নিত হয়। এটি একটি পরিচিত সীমাবদ্ধতা যা আমরা ভবিষ্যতে ঠিক করব (দেখুন সমস্যা সমাধান)।
startTransition ফাংশনের একটি স্থিতিশীল identity আছে, তাই আপনি প্রায়ই এটিকে Effect dependencies থেকে বাদ দিতে দেখবেন, কিন্তু এটি অন্তর্ভুক্ত করলে Effect fire করবে না। যদি linter আপনাকে কোনো error ছাড়াই একটি dependency বাদ দিতে দেয়, তাহলে এটি নিরাপদ। Effect dependencies অপসারণ সম্পর্কে আরো জানুন।
একটি state আপডেট যদি ট্রানজিশন হিসাবে চিহ্নিত হয়, তাহলে অন্যান্য state আপডেট দ্বারা তা বাধাগ্রস্ত হবে। উদাহরণস্বরূপ, যদি আপনি একটি চার্ট কম্পোনেন্টে একটি ট্রানজিশনের মধ্যে আপডেট করেন, কিন্তু তারপর চার্টটি পুনরায় রেন্ডার হওয়ার মাঝখানে একটি input-এ টাইপ শুরু করেন, React ইনপুট আপডেট সম্পর্কিত কাজ সম্পন্ন করার পরে চার্ট কম্পোনেন্টে রেন্ডারিং কাজটি পুনরায় শুরু করবে।
Transition আপডেটগুলি টেক্সট ইনপুটগুলি নিয়ন্ত্রণের জন্য ব্যবহৃত হতে পারে না।
যদি একাধিক চলমান Transitions থাকে, React বর্তমানে তাদেরকে একসাথে ব্যাচ করে। এটি একটি সীমাবদ্ধতা যা সম্ভবত ভবিষ্যতের কোনো রিলিজে সরানো হবে।

ব্যবহারবিধি

Actions দিয়ে নন-ব্লকিং আপডেট সম্পাদন করুন

Actions তৈরি করতে এবং পেন্ডিং state অ্যাক্সেস করতে আপনার কম্পোনেন্টের একেবারে উপরে useTransition কল করুন:

import {useState, useTransition} from 'react';

function CheckoutForm() {
  const [isPending, startTransition] = useTransition();
  // ...
}

useTransition ঠিক দুটি আইটেম সহ একটি array রিটার্ন করে:

isPending ফ্ল্যাগ যা আপনাকে জানায় যে একটি পেন্ডিং Transition রয়েছে।
startTransition ফাংশন যা আপনাকে একটি Action তৈরি করতে দেয়।

একটি Transition শুরু করতে, startTransition-এ এইরকম একটি ফাংশন পাস করুন:

import {useState, useTransition} from 'react';
import {updateQuantity} from './api';

function CheckoutForm() {
  const [isPending, startTransition] = useTransition();
  const [quantity, setQuantity] = useState(1);

  function onSubmit(newQuantity) {
    startTransition(async function () {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  }
  // ...
}

startTransition এ পাস করা ফাংশনটিকে “Action” বলা হয়। আপনি একটি Action এর মধ্যে state আপডেট করতে এবং (ঐচ্ছিকভাবে) side effects সম্পাদন করতে পারেন, এবং পৃষ্ঠায় ব্যবহারকারীর ইন্টারঅ্যাকশনগুলি ব্লক না করে এই কাজটি ব্যাকগ্রাউন্ডে করা হবে। একটি Transition একাধিক Actions অন্তর্ভুক্ত করতে পারে, এবং যখন একটি Transition চলমান থাকে, আপনার UI রেস্পন্সিভ থাকে। উদাহরণস্বরূপ, যদি ব্যবহারকারী একটি ট্যাবে ক্লিক করে কিন্তু তারপর তাদের মন পরিবর্তন করে এবং অন্য ট্যাবে ক্লিক করে, তাহলে প্রথম আপডেট শেষ হওয়ার জন্য অপেক্ষা না করে দ্বিতীয় ক্লিকটি তাৎক্ষণিকভাবে পরিচালনা করা হবে।

চলমান Transitions সম্পর্কে ব্যবহারকারীকে ফিডব্যাক দিতে, isPending state startTransition এর প্রথম কল এ true হয়ে যায়, এবং সমস্ত Actions সম্পূর্ণ হওয়া এবং চূড়ান্ত state ব্যবহারকারীকে দেখানো পর্যন্ত true থাকে। Transitions অবাঞ্ছিত লোডিং ইন্ডিকেটর প্রতিরোধ করতে Actions এর side effects ক্রমানুসারে সম্পূর্ণ করা নিশ্চিত করে, এবং আপনি useOptimistic দিয়ে Transition চলাকালীন তাৎক্ষণিক ফিডব্যাক প্রদান করতে পারেন।

Actions এবং নিয়মিত event handling এর মধ্যে পার্থক্য

উদাহরণ 1 / 2:
একটি Action এ quantity আপডেট করা

এই উদাহরণে, updateQuantity ফাংশনটি কার্টে আইটেমের quantity আপডেট করার জন্য সার্ভারে একটি অনুরোধ অনুকরণ করে। এই ফাংশনটি কৃত্রিমভাবে ধীর করা হয়েছে যাতে অনুরোধটি সম্পূর্ণ করতে কমপক্ষে এক সেকেন্ড সময় লাগে।

দ্রুত একাধিকবার quantity আপডেট করুন। লক্ষ্য করুন যে কোনো অনুরোধ চলমান থাকার সময় pending “Total” state দেখানো হয়, এবং চূড়ান্ত অনুরোধ সম্পূর্ণ হওয়ার পরেই “Total” আপডেট হয়। যেহেতু আপডেটটি একটি Action এ রয়েছে, তাই অনুরোধ চলমান থাকার সময় “quantity” আপডেট করা অব্যাহত থাকতে পারে।

ফর্ক

import { useState, useTransition } from "react";
import { updateQuantity } from "./api";
import Item from "./Item";
import Total from "./Total";

export default function App({}) {
  const [quantity, setQuantity] = useState(1);
  const [isPending, startTransition] = useTransition();

  const updateQuantityAction = async newQuantity => {
    // To access the pending state of a transition,
    // call startTransition again.
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  };

  return (
    <div>
      <h1>Checkout</h1>
      <Item action={updateQuantityAction}/>
      <hr />
      <Total quantity={quantity} isPending={isPending} />
    </div>
  );
}

This is a basic example to demonstrate how Actions work, but this example does not handle requests completing out of order. When updating the quantity multiple times, it’s possible for the previous requests to finish after later requests causing the quantity to update out of order. This is a known limitation that we will fix in the future (see Troubleshooting below).

For common use cases, React provides built-in abstractions such as:

These solutions handle request ordering for you. When using Transitions to build your own custom hooks or libraries that manage async state transitions, you have greater control over the request ordering, but you must handle it yourself.

কম্পোনেন্ট থেকে `action` prop expose করা

আপনি একটি কম্পোনেন্ট থেকে একটি action prop expose করতে পারেন যাতে একটি parent একটি Action কল করতে পারে।

For example, this TabButton component wraps its onClick logic in an action prop:

export default function TabButton({ action, children, isActive }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  return (
    <button onClick={() => {
      startTransition(async () => {
        // await the action that's passed in.
        // This allows it to be either sync or async. 
        await action();
      });
    }}>
      {children}
    </button>
  );
}

কারণ প্যারেন্ট কম্পোনেন্ট তার state আপডেট করে action এর ভিতরে, সেই state আপডেটটি একটি Transition হিসাবে চিহ্নিত হয়। এর মানে আপনি “Posts” এ ক্লিক করতে পারেন এবং তারপর তাৎক্ষণিকভাবে “Contact” এ ক্লিক করতে পারেন এবং এটি ইউজার ইন্টারঅ্যাকশনগুলি বাধা দেয় না:

ফর্ক

import { useTransition } from 'react';

export default function TabButton({ action, children, isActive }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={async () => {
      startTransition(async () => {
        // await the action that's passed in.
        // This allows it to be either sync or async. 
        await action();
      });
    }}>
      {children}
    </button>
  );
}

খেয়াল করুন

When exposing an action prop from a component, you should await it inside the transition.

This allows the action callback to be either synchronous or asynchronous without requiring an additional startTransition to wrap the await in the action.

পেন্ডিং ভিজ্যুয়াল state প্রদর্শন করা

আপনি useTransition হতে রিটার্ন আসা isPending বুলিয়ান মান ব্যবহার করে ব্যবহারকারীকে জানাতে পারেন যে একটি ট্রানজিশন চলছে। উদাহরণস্বরূপ, ট্যাব বোতামটি একটি বিশেষ “pending” ভিজ্যুয়াল state থাকতে পারে:

function TabButton({ action, children, isActive }) {
  const [isPending, startTransition] = useTransition();
  // ...
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  // ...

লক্ষ্য করুন যে “Posts” ক্লিক করা এখন কিভাবে আরও প্রতিক্রিয়াশীল মনে হয় কারণ ট্যাব বাটনটি নিজেই তাৎক্ষণিকভাবে আপডেট হয়:

ফর্ক

import { useTransition } from 'react';

export default function TabButton({ action, children, isActive }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={() => {
      startTransition(async () => {
        await action();
      });
    }}>
      {children}
    </button>
  );
}

অনাকাঙ্ক্ষিত লোডিং ইন্ডিকেটরগুলি প্রতিরোধ করা

এই উদাহরণে, PostsTab কম্পোনেন্টটি use ব্যবহার করে কিছু ডেটা আনয়ন করে। যখন আপনি “Posts” ট্যাবে ক্লিক করেন, তখন PostsTab কম্পোনেন্টটি সাসপেন্ড হয়, যা কাছাকাছি লোডিং ফলব্যাক প্রদর্শন করে:

ফর্ক

import { Suspense, useState } from 'react';
import TabButton from './TabButton.js';
import AboutTab from './AboutTab.js';
import PostsTab from './PostsTab.js';
import ContactTab from './ContactTab.js';

export default function TabContainer() {
  const [tab, setTab] = useState('about');
  return (
    <Suspense fallback={<h1>🌀 Loading...</h1>}>
      <TabButton
        isActive={tab === 'about'}
        action={() => setTab('about')}
      >
        About
      </TabButton>
      <TabButton
        isActive={tab === 'posts'}
        action={() => setTab('posts')}
      >
        Posts
      </TabButton>
      <TabButton
        isActive={tab === 'contact'}
        action={() => setTab('contact')}
      >
        Contact
      </TabButton>
      <hr />
      {tab === 'about' && <AboutTab />}
      {tab === 'posts' && <PostsTab />}
      {tab === 'contact' && <ContactTab />}
    </Suspense>
  );
}

পুরো ট্যাব কন্টেইনার লুকিয়ে একটি লোডিং ইন্ডিকেটর দেখানো ব্যবহারকারীর জন্য অস্বস্তিকর অভিজ্ঞতা তৈরি করে। যদি আপনি TabButton এ useTransition যোগ করেন, তাহলে আপনি বরং ট্যাব বোতামেই পেন্ডিং state প্রদর্শন করতে পারেন।

লক্ষ্য করুন যে “Posts” ক্লিক করলে আর পুরো ট্যাব কন্টেইনার একটি স্পিনার দিয়ে প্রতিস্থাপিত হয় না:

ফর্ক

import { useTransition } from 'react';

export default function TabButton({ action, children, isActive }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={() => {
      startTransition(async () => {
        await action();
      });
    }}>
      {children}
    </button>
  );
}

Suspense এর সাথে transitions ব্যবহার সম্পর্কে আরও পড়ুন।

খেয়াল করুন

ট্রানজিশনগুলি কেবল ইতিমধ্যে প্রকাশিত কন্টেন্ট (যেমন ট্যাব কন্টেইনার) লুকানো এড়াতে যথেষ্ট দীর্ঘ সময় “অপেক্ষা” করবে। যদি Posts ট্যাবে একটি নেস্টেড <Suspense> সীমানা থাকত, তবে ট্রানজিশনটি এর জন্য “অপেক্ষা” করত না।

Suspense-সংবলিত রাউটার তৈরি করা

যদি আপনি একটি React ফ্রেমওয়ার্ক অথবা রাউটার তৈরি করেন, আমরা পরামর্শ দিই আপনি আপনার নেভিগেশনগুলিকে ট্রানজিশন হিসেবে চিহ্নিত করুন।

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }
  // ...

এটি তিনটি কারণে পরামর্শ দেয়া হয়:

ট্রানজিশনগুলি বাধাগ্রস্ত হতে পারে, যা ইউজারকে রি-রেন্ডার সম্পূর্ণ হওয়ার অপেক্ষা না করে অন্য কিছুতে ক্লিক করতে দেয়।
ট্রানজিশনগুলি অনাকাঙ্ক্ষিত লোডিং ইন্ডিকেটরগুলি প্রতিরোধ করে, যা ইউজারকে নেভিগেশনে বিভ্রান্তিকর লাফ এড়াতে সাহায্য করে।
ট্রানজিশনগুলি সমস্ত pending actions এর জন্য অপেক্ষা করে যা ইউজারকে নতুন পৃষ্ঠা দেখানোর আগে side effects সম্পূর্ণ হওয়ার জন্য অপেক্ষা করতে দেয়।

এখানে নেভিগেশনের জন্য ট্রানজিশন ব্যবহার করে একটি খুব সহজ রাউটার উদাহরণ দেওয়া হল।

ফর্ক

import { Suspense, useState, useTransition } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout isPending={isPending}>
      {content}
    </Layout>
  );
}

function BigSpinner() {
  return <h2>🌀 Loading...</h2>;
}

খেয়াল করুন

Suspense-enabled রাউটারগুলি সাধারণত নেভিগেশন আপডেটগুলিকে ডিফল্টভাবে transitions এ মোড়ানোর আশা করা হয়।

ব্যবহারকারীদের কাছে ত্রুটি সীমানা ব্যবহার করে ত্রুটি প্রদর্শন করা

যদি startTransition এ পাস করা কোনো ফাংশন কোনো ত্রুটি দেখায়, তাহলে আপনি আপনার ব্যবহারকারীকে সেই ত্রুটির বার্তাটি প্রদর্শন করতে পারেন একটি এরর বাউন্ডারির মাধ্যমে। এরর বাউন্ডারি ব্যবহার করতে, যে কম্পোনেন্টে আপনি useTransition কল করছেন তাকে একটি এরর বাউন্ডারির মধ্যে মোড়ান। একবার startTransition এ পাস করা ফাংশনে ত্রুটি ঘটলে, এরর বাউন্ডারির জন্য নির্ধারিত ফলব্যাক প্রদর্শিত হবে।

ফর্ক

import { useTransition } from "react";
import { ErrorBoundary } from "react-error-boundary";

export function AddCommentContainer() {
  return (
    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
      <AddCommentButton />
    </ErrorBoundary>
  );
}

function addComment(comment) {
  // For demonstration purposes to show Error Boundary
  if (comment == null) {
    throw new Error("Example Error: An error thrown to trigger error boundary");
  }
}

function AddCommentButton() {
  const [pending, startTransition] = useTransition();

  return (
    <button
      disabled={pending}
      onClick={() => {
        startTransition(() => {
          // Intentionally not passing a comment
          // so error gets thrown
          addComment();
        });
      }}
    >
      Add comment
    </button>
  );
}

সমস্যা সমাধান

একটি ট্রানজিশনে ইনপুট আপডেট করা কাজ করে না

আপনি এমন একটি state ভেরিয়েবলের জন্য ট্রানজিশন ব্যবহার করতে পারবেন না যা একটি ইনপুট নিয়ন্ত্রণ করে:

const [text, setText] = useState('');
// ...
function handleChange(e) {
  // ❌ Can't use Transitions for controlled input state
  startTransition(() => {
    setText(e.target.value);
  });
}
// ...
return <input value={text} onChange={handleChange} />;

এর কারণ হল ট্রানজিশনগুলি নন-ব্লকিং, কিন্তু change ইভেন্টের রেসপন্সে ইনপুট আপডেট করা অবশ্যই একই সময়ে হওয়া উচিত। যদি আপনি টাইপ করার সময় একটি ট্রানজিশন চালাতে চান, তাহলে আপনার দুটি বিকল্প উপায় রয়েছে:

১. আপনি দুটি আলাদা state ভেরিয়েবল ঘোষণা করতে পারেন: একটি ইনপুট state এর জন্য (যা সর্বদা একই সময়ে আপডেট হয়), এবং একটি যা আপনি ট্রানজিশনে আপডেট করবেন। এটি আপনাকে একই সময়ে state ব্যবহার করে ইনপুট নিয়ন্ত্রণ করতে দেয়, এবং বাকি রেন্ডারিং লজিকে ট্রানজিশন state ভেরিয়েবল (যা ইনপুটের পিছনে “বিলম্বিত” হবে) পাস করতে দেয়। ২. বিকল্প হিসেবে, আপনি একটি state ভেরিয়েবল রাখতে পারেন, এবং useDeferredValue যোগ করতে পারেন যা বাস্তব মানের পিছনে “বিলম্বিত” হবে। এটি নতুন মানের সাথে “মেলে যাওয়ার” জন্য নন-ব্লকিং রি-রেন্ডারগুলি স্বয়ংক্রিয়ভাবে ট্রিগার করবে।

React আমার state আপডেটকে ট্রানজিশন হিসেবে গ্রহণ করে না

যখন আপনি একটি state আপডেটকে ট্রানজিশনে মোড়ান, নিশ্চিত করুন যে এটি startTransition কলের সময় ঘটে:

startTransition(() => {
  // ✅ Setting state *during* startTransition call
  setPage('/about');
});

startTransition এ আপনি যে ফাংশন পাস করবেন তা অবশ্যই সিঙ্ক্রোনাস হতে হবে। আপনি এভাবে একটি আপডেটকে ট্রানজিশন হিসেবে চিহ্নিত করতে পারবেন না:

startTransition(() => {
  // ❌ Setting state *after* startTransition call
  setTimeout(() => {
    setPage('/about');
  }, 1000);
});

বরং, আপনি এটি করতে পারেন:

setTimeout(() => {
  startTransition(() => {
    // ✅ Setting state *during* startTransition call
    setPage('/about');
  });
}, 1000);

React আমার `await` এর পরে state update কে ট্রানজিশন হিসেবে বিবেচনা করছে না

যখন আপনি startTransition ফাংশনের মধ্যে await ব্যবহার করেন, তখন await এর পরে ঘটে যাওয়া state update গুলো ট্রানজিশন হিসেবে চিহ্নিত হয় না। আপনাকে প্রতিটি await এর পরে state update গুলোকে একটি startTransition কলের মধ্যে মোড়াতে হবে:

startTransition(async () => {
  await someAsyncFunction();
  // ❌ Not using startTransition after await
  setPage('/about');
});

তবে, এটি এর পরিবর্তে কাজ করে:

startTransition(async () => {
  await someAsyncFunction();
  // ✅ Using startTransition *after* await
  startTransition(() => {
    setPage('/about');
  });
});

This is a JavaScript limitation due to React losing the scope of the async context. In the future, when AsyncContext is available, this limitation will be removed.

আমি একটি কম্পোনেন্টের বাইরে থেকে `useTransition` কল করতে চাই

আপনি একটি কম্পোনেন্টের বাইরে থেকে useTransition কল করতে পারবেন না কারণ এটি একটি Hook। এই ক্ষেত্রে, এর পরিবর্তে standalone startTransition পদ্ধতি ব্যবহার করুন। এটি একইভাবে কাজ করে, কিন্তু এটি isPending ইন্ডিকেটর প্রদান করে না।

আমি যে ফাংশন `startTransition`-এ পাস করি তা তাৎক্ষণিকভাবে কার্যকর হয়

আপনি যদি এই কোডটি চালান, তা 1, 2, 3 প্রিন্ট করবে:

console.log(1);
startTransition(() => {
  console.log(2);
  setPage('/about');
});
console.log(3);

এটি 1, 2, 3 প্রিন্ট করার কথা। startTransition-এ আপনি যে ফাংশন পাস করেন তা দেরি হয় না। ব্রাউজারের setTimeout-এর মতো, এটি পরে কলব্যাক চালায় না। React আপনার ফাংশনটি তাৎক্ষণিকভাবে কার্যকর করে, কিন্তু এটি চালানোর সময় নির্ধারিত কোনো state আপডেটগুলি ট্রানজিশন হিসাবে চিহ্নিত হয়। এটি এভাবে কাজ করে বলে আপনি কল্পনা করতে পারেন:

// A simplified version of how React works

let isInsideTransition = false;

function startTransition(scope) {
  isInsideTransition = true;
  scope();
  isInsideTransition = false;
}

function setState() {
  if (isInsideTransition) {
    // ... schedule a Transition state update ...
  } else {
    // ... schedule an urgent state update ...
  }
}

My state updates in Transitions are out of order

If you await inside startTransition, you might see the updates happen out of order.

In this example, the updateQuantity function simulates a request to the server to update the item’s quantity in the cart. This function artificially returns the every other request after the previous to simulate race conditions for network requests.

Try updating the quantity once, then update it quickly multiple times. You might see the incorrect total:

ফর্ক

import { useState, useTransition } from "react";
import { updateQuantity } from "./api";
import Item from "./Item";
import Total from "./Total";

export default function App({}) {
  const [quantity, setQuantity] = useState(1);
  const [isPending, startTransition] = useTransition();
  // Store the actual quantity in separate state to show the mismatch.
  const [clientQuantity, setClientQuantity] = useState(1);
  
  const updateQuantityAction = newQuantity => {
    setClientQuantity(newQuantity);

    // Access the pending state of the transition,
    // by wrapping in startTransition again.
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  };

  return (
    <div>
      <h1>Checkout</h1>
      <Item action={updateQuantityAction}/>
      <hr />
      <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
    </div>
  );
}

When clicking multiple times, it’s possible for previous requests to finish after later requests. When this happens, React currently has no way to know the intended order. This is because the updates are scheduled asynchronously, and React loses context of the order across the async boundary.

This is expected, because Actions within a Transition do not guarantee execution order. For common use cases, React provides higher-level abstractions like useActionState and <form> actions that handle ordering for you. For advanced use cases, you’ll need to implement your own queuing and abort logic to handle this.

Example of useActionState handling execution order:

ফর্ক

import { useState, useActionState } from "react";
import { updateQuantity } from "./api";
import Item from "./Item";
import Total from "./Total";

export default function App({}) {
  // Store the actual quantity in separate state to show the mismatch.
  const [clientQuantity, setClientQuantity] = useState(1);
  const [quantity, updateQuantityAction, isPending] = useActionState(
    async (prevState, payload) => {
      setClientQuantity(payload);
      const savedQuantity = await updateQuantity(payload);
      return savedQuantity; // Return the new quantity to update the state
    },
    1 // Initial quantity
  );

  return (
    <div>
      <h1>Checkout</h1>
      <Item action={updateQuantityAction}/>
      <hr />
      <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
    </div>
  );
}

পূর্ববর্তী পেইজuseSyncExternalStore

পরবর্তী পেইজComponents

useTransition

রেফারেন্স

useTransition()

প্যারামিটারস

রিটার্নস

startTransition(action)

খেয়াল করুন

startTransition এ কল করা ফাংশনগুলিকে “অ্যাকশন” বলা হয়।

প্যারামিটারসমূহ

রিটার্নস

সতর্কতা

ব্যবহারবিধি

Actions দিয়ে নন-ব্লকিং আপডেট সম্পাদন করুন

Actions এবং নিয়মিত event handling এর মধ্যে পার্থক্য

উদাহরণ 1 / 2: একটি Action এ quantity আপডেট করা

কম্পোনেন্ট থেকে action prop expose করা

খেয়াল করুন

পেন্ডিং ভিজ্যুয়াল state প্রদর্শন করা

অনাকাঙ্ক্ষিত লোডিং ইন্ডিকেটরগুলি প্রতিরোধ করা

খেয়াল করুন

Suspense-সংবলিত রাউটার তৈরি করা

খেয়াল করুন

ব্যবহারকারীদের কাছে ত্রুটি সীমানা ব্যবহার করে ত্রুটি প্রদর্শন করা

সমস্যা সমাধান

একটি ট্রানজিশনে ইনপুট আপডেট করা কাজ করে না

React আমার state আপডেটকে ট্রানজিশন হিসেবে গ্রহণ করে না

React আমার await এর পরে state update কে ট্রানজিশন হিসেবে বিবেচনা করছে না

আমি একটি কম্পোনেন্টের বাইরে থেকে useTransition কল করতে চাই

আমি যে ফাংশন startTransition-এ পাস করি তা তাৎক্ষণিকভাবে কার্যকর হয়

My state updates in Transitions are out of order

`useTransition()`

`startTransition(action)`

`startTransition` এ কল করা ফাংশনগুলিকে “অ্যাকশন” বলা হয়।

উদাহরণ 1 / 2:
একটি Action এ quantity আপডেট করা

কম্পোনেন্ট থেকে `action` prop expose করা

React আমার `await` এর পরে state update কে ট্রানজিশন হিসেবে বিবেচনা করছে না

আমি একটি কম্পোনেন্টের বাইরে থেকে `useTransition` কল করতে চাই

আমি যে ফাংশন `startTransition`-এ পাস করি তা তাৎক্ষণিকভাবে কার্যকর হয়