Хук за оптимизация на производителността useTransition в React

Хукът за оптимизация на производителността useTransition ни позволява да актуализираме състояния без блокирането на графичния интерфейс.

С този хук можем да зададем на актуализацията на дадено състояние нисък приоритет, което ще позволи на актуализацията на други състояния да има висок приоритет и да се изпълнява без забавяне.

Като пример може да се посочи филтрирането на падащ списък с продукти при въвеждане на символи от потребителя в полето за търсене. Разбира се, самият списък може да се показва с известно забавяне, но не бихме искали символите да се въвеждат в полето за търсене със забавяне.

Нека да видим как в такива случаи хукът 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();

Също така имаме състояние filterTerm, в което се съхранява изразът, въведен в полето за въвеждане, и функция setFilterTerm за задаването му:

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

При въвеждане на символи в полето за въвеждане всеки път се извиква функцията updateFilterHandler, в която се извършва актуализация на filterTerm. Точно тук прилагаме нашия хук useTransition, като обгръщаме функцията за задаване setFilterTerm в startTransition по следния начин:

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

По този начин ние зададохме за актуализацията на състоянието filterTerm нисък приоритет и нашето поле за въвеждане ще остане отзивчиво.

Чрез променливата isPending можем да покажем на потребителя, че актуализацията на списъка все още е в процес. Нека изведем тази информация под полето за въвеждане, докато списъкът се актуализира:

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