React Basics~Render Performance/ useTransition

October 17, 2024

This content originally appeared on DEV Community and was authored by Ogasawara Kakeru

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

This content originally appeared on DEV Community and was authored by Ogasawara Kakeru