Хук аптымізацыі прадукцыйнасці 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>updating ...</p>}
    <ProductList products={filteredProducts} />
  </div>
);