Hook pro optimalizaci výkonu useTransition v Reactu

Hook pro optimalizaci výkonu useTransition nám umožňuje aktualizovat stavy bez blokování grafického rozhraní.

S pomocí tohoto hooku můžeme nastavit aktualizaci nějakého stavu nízkou prioritu, což umožní aktualizaci jiných stavů mít vysokou prioritu a provádět se bez zpoždění.

Jako příklad lze uvést filtrování rozbalovacího seznamu produktů při zadávání znaků uživatelem do pole vyhledávání. Samozřejmě, samotný seznam se může zobrazovat s určitým zpožděním, ale nechtěli bychom, aby se znaky zadávaly do pole vyhledávání se zpožděním.

Podívejme se, jak nám v takových případech může pomoci hook useTransition. Předpokládejme, že máme kus kódu hlavní komponenty. Pojďme jej analyzovat:

App.jsximport { useTransition } from 'react';
import { useState } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');
  
  const filteredProducts = filterProducts(filterTerm);
  
  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }
 
  return (
    <div>
      <input type="text" onChange={updateFilterHandler} />
      <ProductList products={filteredProducts} />
    </div>
  );
}

Zde vidíme dvě proměnné pro useTransition. Proměnná isPending obsahuje logickou hodnotu a ukazuje, zda je proces aktualizace ukončen, a startTransition funkci, která umožňuje snížit prioritu aktualizace:

App.jsxconst [isPending, startTransition] = useTransition();

Také máme stav filterTerm, ve kterém je uložen výraz zadávaný do vstupního pole a funkce setFilterTerm pro jeho nastavení:

App.jsxconst [filterTerm, setFilterTerm] = useState('');

Při zadávání znaků do vstupního pole se nám pokaždé volá funkce updateFilterHandler, ve které probíhá aktualizace filterTerm. Právě zde používáme náš hook useTransition, obalujeme funkci nastavení setFilterTerm do startTransition následovně:

App.jsxfunction updateFilterHandler(event) {
  startTransition(() => {
    setFilterTerm(event.target.value);
  });
}

Tímto jsme nastavili pro aktualizaci stavu filterTerm nízkou prioritu a naše vstupní pole zůstane reagující.

Pomocí proměnné isPending můžeme uživateli ukázat, že aktualizace seznamu stále probíhá. Vypišme tuto informaci pod vstupní pole, dokud se seznam aktualizuje:

App.jsxreturn (
  <div>
    <input type="text" onChange={updateFilterHandler} />
    {isPending && <p>Aktualizace ...</p>}
    <ProductList products={filteredProducts} />
  </div>
);