ReactHooksについてまとめる（Performance Hooks useDeferredValue）

概要

ReactHooksのPerformance Hooksについてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。

今回はuseDeferredValue編です。

useDeferredValue

新しいコンテンツがロードされているときに古いコンテンツが表示される

UIの一部の更新を遅延させるために、コンポーネントのトップレベルでuseDeferredValueを呼び出します。

例を見たほうがわかりやすいので、一気に例から見てみます。

この例では、検索結果を取得する際に、useStateの更新関数のsetQueryによって、Suspenceが発火し、Loading...が表示するようにfallbackされます。

このコード内で、useDeferredValueを使用して、クエリの遅延の際に、古い結果を表示させるようにします。

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

クエリはすぐに更新されるので、入力には新しい値が表示されます。しかし、deferredQuery はデータがロードされるまで以前の値を保持するので、SearchResults は少しの間、古い結果を表示します。

下の例で "a" と入力し、結果がロードされるのを待ってから、入力を "ab" に編集してください。サスペンスのフォールバックではなく、新しい結果が読み込まれるまでの間、古い結果のリストが表示されることがわかります。

参考