useTransition এবং useDeferredValue এর মতো একযোগে বৈশিষ্ট্যগুলি কী?

Question

Accepted Answer

Concurrent React **রেন্ডারিং কাজ বাধা দিতে, থামাতে এবং অগ্রাধিকার দিতে** পারে। আপনি কিছু আপডেটকে **অ-জরুরি রূপান্তর** হিসাবে চিহ্নিত করেন যাতে জরুরি আপডেটগুলি (যেমন টাইপিং) প্রতিক্রিয়াশীল থাকে এমনকি যখন একটি ভারী পুনরায় রেন্ডার অপেক্ষায় থাকে।

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**এটি কেন সাহায্য করে:** একটি বিশাল তালিকা ফিল্টার করা ব্যয়বহুল। একটি রূপান্তর ছাড়াই, React ইনপুটকে হাজার হাজার সারি পুনরায় রেন্ডার করার সময় ব্লক করবে, তাই টাইপিং আলস্যময় অনুভব করে। ব্যয়বহুল আপডেটটি `startTransition` এর মধ্যে মোড়ানোর মাধ্যমে, React ইনপুট আপডেটগুলিকে উচ্চ-অগ্রাধিকার রাখে এবং যদি আপনি অন্য কী টাইপ করেন তবে চলমান ফিল্টার রেন্ডারকে **ফেলে দিতে** পারে — কোনও পুরানো, ঝাঁকুনিপূর্ণ ফ্রেম নেই।

## useDeferredValue

একটি সহজ বিকল্প যখন আপনি সেটারকে নিয়ন্ত্রণ করেন না — এটি আপনাকে একটি মানের "পিছিয়ে থাকা" কপি দেয়:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## কখন ব্যবহার করতে হবে

েএই দ্রুত ব্যবহারকারী ইনপুট দ্বারা চালিত **ব্যয়বহুল, অ-জরুরি UI আপডেটের** জন্য ব্যবহার করুন: বড় ডেটাসেটের উপর অনুসন্ধান-যখন-আপনি-টাইপ, ভারী সামগ্রী রেন্ডার করে এমন ট্যাব সুইচ, বড় ফিল্টার/সর্টেড টেবিল। সাধারণ অ্যাপ্লিকেশনের জন্য তারা অপ্রয়োজনীয় — তারা উজ্জ্বল হয় যখন একটি রেন্ডার ইনপুট ল্যাগ দৃশ্যমান করার জন্য যথেষ্ট ভারী হয়।