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

パフォーマンス最適化フック useDeferredValueは、 useTransitionと同様に、グラフィカルインターフェースの動作を高速化するのに役立ちますが、方法は少し異なります。

前のレッスンを参照して、 useTransitionの場合に状態更新関数setFilterTermをどのようにラップしたかを確認してください。状態更新コードが常に利用可能であるとは限りません。例えば、接続したライブラリ内に隠されている場合があります。そのような場合、フック useDeferredValueを利用できます。その時は、状態自体またはその状態を使用して計算された結果をラップし、その優先度を下げる必要があります。

子コンポーネントProductListの以下のコード片を分析してみましょう：

import {useDeferredValue} from 'react'

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

ここでは、コンポーネントのpropsから取得した変数products自体を useDeferredValueでラップしていることに注意してください。その後、結果をdeferredProductsに代入し、これを使って以降作業を進めます：

const deferredProducts = useDeferredValue(products);

さて、前のレッスンで検討したメインコンポーネントのコード片から、以下の行を削除するとします：

const [isPending, startTransition] = useTransition();

そして、isPendingを使用する行も削除します：

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

さらに、関数setFilterTermからのラッピングを解除すると、前のレッスンと同じ結果が得られます：

function updateFilterHandler(event) {
	setFilterTerm(event.target.value);
}