• Предположим, что мы отображаем большое количество данных, например 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 в startTransition.

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

• startTransition делает задержку выполнения функции внутри него.

• Благодаря этой функции мы можем легко перейти к следующему значению в поле ввода.

・Перед вводом

・После ввода