Хук оптимизације перформанси useTransition у React-у

Хук за оптимизацију перформанси useTransition нам омогућава да ажурирамо state-ове без блокирања графичког интерфејса.

Помоћу овог хука можемо подесити да ажурирање неког state-а има низак приоритет, што ће дозволити да ажурирања других state-ова имају висок приоритет и извршавају се без одлагања.

Као пример можемо навести филтрирање падајућег списка производа при уносу симбола од стране корисника у поље претраге. Наравно, сам списак може да се приказује са одређеним закашњењем, али не бисмо желели да се симболи уносе у поље претраге са закашњењем.

Хајде да погледамо како нам у таквим случајевима може помоћи хук useTransition. Претпоставимо да имамо део кода главног компонента. Хајде да га анализирамо:

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

Овде видимо две променљиве за useTransition. Променљива isPending садржи булову вредност и показује да ли је процес ажурирања завршен, а startTransition функцију, која омогућава смањење приоритета ажурирања:

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

Такође имамо state filterTerm, у коме се чува израз који се уноси у поље за унос и функцију setFilterTerm за његово постављање:

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

При уносу симбола у input код нас сваки пут позива функција updateFilterHandler, у којој се дешава ажурирање filterTerm. Управо овде примењујемо наш хук useTransition, обавијајући функцију постављања setFilterTerm у startTransition на следећи начин:

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

На тај начин смо поставили за ажурирање state-а filterTerm низак приоритет и наше поље за унос ће остати респонзивно.

Помоћу променљиве isPending можемо показати кориснику да је ажурирање списка још у току. Приказаћемо ту информацију испод поља за унос, док се списак ажурира:

App.jsxreturn (
  <div>
    <input type="text" onChange={updateFilterHandler} />
    {isPending && <p>ажурирање у току ...</p>}
    <ProductList products={filteredProducts} />
  </div>
);