• Supposons que nous affichons un grand nombre de données, par exemple 10 milliers de données, il y a souvent un retard dans l'affichage de la valeur suivante dans le champ de saisie.

• Dans ce cas, lorsque l'on saisit une valeur, l'écran affiche les données filtrées.

• Mais ensuite, un problème qui se produit est le retard dans l'affichage de l'action suivante, telle que la saisie de la valeur suivante dans le champ de saisie, en raison de la gestion d'une trop grande quantité de données.

・src/Exemple.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}
))}

• Pour résoudre le problème, nous pouvons envelopper la fonction setFilterVal avec une startTransition.

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

• La startTransition retarde l'exécution d'une fonction en son sein.

• Grâce à cette fonctionnalité, nous pouvons facilement passer à la valeur suivante dans le champ de saisie.

・Avant la saisie

・Après la saisie