Хук аптымізацыі прадукцыйнасці useDeferredValue у React

Хук аптымізацыі прадукцыйнасці useDeferredValue, таксама як і useTransition, дапамагае паскорыць працу графічнага інтэрфейсу, але робіць гэта крыху па-іншаму.

Зірніце на мінулы ўрок і паглядзіце, як у выпадку з useTransition мы абгортвалі функцыю абнаўлення setFilterTerm. Так вось, код абнаўлення стэйту не заўсёды можа быць даступны. Ён можа быць схаваны, напрыклад, у бібліятэцы, якую вы падключылі. У гэтым выпадку мы можам скарыстацца хукам useDeferredValue. Тады нам трэба абгарнуць альбо сам стэйт, альбо вынік, які вылічваецца з дапамогай гэтага стэйту, тым самым знізіўшы яго прыярытэт.

Давайце прааналізуем наступны кавалачак коду даччынага кампанента ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

function ProductList({ products }) {
  const deferredProducts = useDeferredValue(products);
  
  return (
    <ul>
      {deferredProducts.map((product) => (
        <li>{product}</li>
      ))}
    </ul>
  );
}

Звярніце ўвагу, што тут мы абгарнулі у useDeferredValue самую зменную products, якую мы ўзялі з пропсаў кампанента. Затым мы запісалі вынік у deferredProducts, з якой і будзем працаваць далей:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Цяпер, калі ў кавалку коду галоўнага кампанента, які мы разглядалі на мінулым уроку, прыбраць радок:

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

І радок з выкарыстаннем isPending:

App.jsx{isPending && <p>updating ...</p>}

А таксама зняць абгортку з функцыі setFilterTerm, то мы атрымаем той жа вынік, што і на мінулым уроку:

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