Reactのパフォーマンス最適化フックuseDeferredValue

パフォーマンス最適化フック 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>
  );
}

ここでは、コンポーネントのpropsから取得した 変数products自体を useDeferredValueでラップしていることに 注意してください。 その後、結果を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);
}