• 假設我們要顯示大量數據，例如一萬條數據，在將下一個值輸入到輸入欄位時通常會出現延遲。

• 在這種情況下，當我們輸入一個值時，螢幕會顯示過濾後的資料。

• 但是，出現的一個問題是由於處理太多資料而延遲顯示下一個操作，例如在輸入欄位中輸入下一個值。

·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}
))}

• 為了解決這個問題，我們可以用startTransition包裝setFilterVal函數。

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

• startTransition 使函數延遲在其中執行。

• 借助此功能，我們可以輕鬆地轉到輸入欄位中的下一個值。

・輸入前

・輸入後