Хук оптимизации производительности useTransition в React
Хук оптимизации производительности
useTransition позволяет нам
обновлять стейты без блокировки
графического интерфейса.
С помощью данного хука мы можем задать обновлению какого-нибудь стейта низкий приоритет, что позволит обновлению других стейтов иметь высокий приоритет и выполняться без задержек.
В качестве примера можно привести фильтрацию выпадающего списка товаров при введении пользователем символов в поле поиска. Конечно, сам список может отображаться с какой-то задержкой, но нам бы не хотелось, чтобы символы вводились в поле поиска с задержкой.
Давайте посмотрим, как в таких случаях
нам может помочь хук useTransition.
Предположим, у нас есть кусок кода основного
комопонента. Давайте его проанализируем:
import { 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 функцию, которая
и позволяет снизить приоритет обновления:
const [isPending, startTransition] = useTransition();
Также у нас есть стейт filterTerm,
в котором хранится вводимое в
поле ввода выражение и функция
setFilterTerm для его установки:
const [filterTerm, setFilterTerm] = useState('');
При вводе символов в инпут у нас каждый
раз вызывается функция updateFilterHandler,
в которой происходит обновление
filterTerm. Именно здесь мы применяем
наш хук useTransition, оборачивая функцию
установки setFilterTerm
в startTransition следующим образом:
function updateFilterHandler(event) {
startTransition(() => {
setFilterTerm(event.target.value);
});
}
Таким образом, мы установили для
обновления стейта filterTerm низкий
приоритет и наше поле ввода останется
отзывчивым.
При помощи переменной isPending мы
можем показать пользователю, что обновление
списка еще в процессе. Выведем эту информацию
под полем ввода, пока список обновляется:
return (
<div>
<input type="text" onChange={updateFilterHandler} />
{isPending && <p>updating ...</p>}
<ProductList products={filteredProducts} />
</div>
);