• मान लीजिए कि हम बड़ी संख्या में डेटा प्रदर्शित कर रहे हैं, जैसे कि 10 हजार डेटा, इनपुट फ़ील्ड में अगला मान डालने में अक्सर देरी होती है।

• इस मामले में, जब हम कोई मान दर्ज करते हैं, तो स्क्रीन फ़िल्टर किया गया डेटा प्रदर्शित करती है।

• लेकिन फिर, एक समस्या जो उत्पन्न होती है वह है बहुत अधिक डेटा को संभालने के कारण अगली क्रिया को प्रदर्शित करने में देरी, जैसे कि इनपुट फ़ील्ड में अगला मान दर्ज करना।

・src/Example.js

import { useState } from "react";

const generateDummyItem = (num) => {
  return new Array(num).fill(null).map((item, index) => `item ${index}`);
};

const dummyItems = generateDummyItem(10000);

const Example = () => {
  const [filterVal, setFilterVal] = useState("");

  const changeHandler = (e) => {
      setFilterVal(e.target.value);
  };

  return (
    
      
      {isPending && 
Loading...
}
      

{dummyItems .filter((item) => { if (filterVal === "") return true; return item.includes(filterVal); }) .map((item) => (
• {item}
))}

• समस्या को हल करने के लिए, हम setFilterVal फ़ंक्शन को स्टार्टट्रांज़िशन के साथ लपेट सकते हैं।

  const changeHandler = (e) => {
    startTransition(() => {
      setFilterVal(e.target.value);
    })
  };

• स्टार्टट्रांज़िशन इसके भीतर निष्पादित होने वाले फ़ंक्शन में देरी करता है।

• इस सुविधा के लिए धन्यवाद, हम आसानी से इनपुट फ़ील्ड में अगले मान पर जा सकते हैं।

・इनपुट से पहले

・इनपुट के बाद