• Angenommen, wir zeigen eine große Anzahl von Daten an, beispielsweise 10.000 Daten. Dann kommt es häufig zu einer Verzögerung beim Eingeben des nächsten Werts in das Eingabefeld.

• Wenn wir in diesem Fall einen Wert eingeben, zeigt der Bildschirm gefilterte Daten an.

• Ein Problem, das jedoch auftritt, ist die Verzögerung bei der Anzeige der nächsten Aktion, z. B. der Eingabe des nächsten Werts in das Eingabefeld, aufgrund der Verarbeitung zu vieler Daten.

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

• Um das Problem zu lösen, können wir die Funktion setFilterVal mit einer startTransition umschließen.

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

• Die startTransition verzögert die Ausführung einer Funktion.

• Dank dieser Funktion können wir problemlos zum nächsten Wert im Eingabefeld wechseln.

・Vor der Eingabe

・Nach der Eingabe