• 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은 그 안에서 실행되는 함수를 지연시킵니다.

• 이 기능 덕분에 입력 필드에서 다음 값으로 쉽게 이동할 수 있습니다.

・입력 전

・입력 후