• Suponha que estejamos exibindo um grande número de dados, como 10 mil dados, muitas vezes há um atraso na colocação do próximo valor no campo de entrada.

• Neste caso, quando inserimos um valor, a tela exibe os dados filtrados.

• Mas então, um problema que ocorre é o atraso na exibição da próxima ação, como inserir o próximo valor no campo de entrada, devido ao tratamento de muitos dados.

・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 o problema, podemos agrupar a função setFilterVal com um startTransition.

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

• O startTransition faz com que uma função atrase para ser executada dentro dele.

• Graças a esse recurso, podemos facilmente passar para o próximo valor no campo de entrada.

・Antes da entrada

・Depois da entrada