• Supongamos que estamos mostrando una gran cantidad de datos, como 10 mil datos, a menudo hay un retraso en la introducción del siguiente valor en el campo de entrada.

• En este caso, cuando ingresamos un valor, la pantalla muestra datos filtrados.

• Pero entonces, un problema que ocurre es el retraso en mostrar la siguiente acción, como ingresar el siguiente valor en el campo de entrada, debido al manejo de demasiados datos.

・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}
))}

• Para resolver el problema, podemos ajustar la función setFilterVal con startTransition.

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

• startTransition retrasa la ejecución de una función dentro de ella.

• Gracias a esta función, podemos pasar fácilmente al siguiente valor en el campo de entrada.

・Antes de ingresar

・Después de la entrada