Name: React Basics~Render Performance/ useTransition
Rating: 4.4 (39 reviews)
Author: kkr0423

React Basics~Render Performance/ useTransition

Suppose that we are displaying a large number of data, such as 10thousands of data, there is often a delay in puuting next value to the input field.
In this case, when we enter a value, the screen displays filtered data.
But then, a problem that occurs is the delay in displaying the next action such as input next value to input field due to handling too much data.

・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 (
    <>
      <input type="text" onChange={changeHandler} />
      {isPending && <div>Loading...</div>}
      <ul>
        {dummyItems
          .filter((item) => {
            if (filterVal === "") return true;
            return item.includes(filterVal);
          })
          .map((item) => (
            <li key={item}>{item}</li>
          ))}
      </ul>
    </>
  );
};

export default Example;

To solve the problem, we can wrap the setFilterVal function with a startTransition.

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

The startTransition makes a function delay to be executed within it.
Thanks to this feature, we can easily move on to the next value in the input field.

・Before input

・After input