使用 useDeferredValue でレンダリングと入力の遅延を最適化

頻繁に React を書く友達は、大量の計算が必要なコンポーネントの更新時に他の入力をブロックする可能性があることを知っています。例えば、典型的なフィルター選択オプションのシーンでは、入力ごとにフィルタリングされる項目を計算しますが、入力が非常に速いため、遅延が発生します。useDeferredValue を使用してフィルタリングに使用される値を分離することで、これら 2 つの部分を分離し、フィルタリングの優先順位を積極的に下げ、入力との競合による遅延を回避できます。

特に大量のデータや複雑な計算を処理する場面で役立ちます。その主な目的は、値の更新をメインスレッドがアイドル状態のときに遅延させて実行し、大量または頻繁な状態の更新による UI の遅延を回避することです。

import React, { useState, useDeferredValue, useMemo } from 'react';

function SearchComponent({ items }) {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  const filteredItems = useMemo(
    () => items.filter(item => item.includes(deferredQuery)),
    [items, deferredQuery]
  );

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="検索..."
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}