• 10,000 個のデータなど、大量のデータを表示しているとします。多くの場合、次の値を入力フィールドに入力する際に​​遅延が発生します。

• この場合、値を入力すると、フィルターされたデータが画面に表示されます。

• しかし、扱うデータが多すぎるため、入力フィールドに次の値を入力するなど、次のアクションの表示が遅れるという問題が発生します。

・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 関数を startTransition でラップします。

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

• startTransition は、その中で実行される関数を遅延させます。

• この機能のおかげで、入力フィールドの次の値に簡単に移動できます。

・入力前

・入力後