useDeferredValueの挙動を確認していく

今日はuseDeferredValueを学んでいきます。

---

• deferred : 日本人が発音するカタカナ英語では「ディファード」と読むようです。
  • 意味 : 延期する，先送りする，遅らせる

useDeferredValue は、UI の一部の更新を遅延させるための React フックです。

なるほど。
ユーザーの入力操作をスムーズに保ちながら、UIの更新やレンダリングが高負荷になる場面ですね！では早速内容に入ってきましょう！

useDeferredValue(value, initialValue?)

引数

• value
  • 遅延させたい値
• initialValue : 省略可能
  • コンポーネントの初回レンダーに使用する値
    • 省略された場合、初回レンダー時には遅延を行いません。

返り値

• currentValue
  • 初回レンダー時
    • 最初に渡した値と同じものが返る
  • 更新時
    • まずは古い値で再レンダー(返り値は古い値)し、次に新しい値でバックグラウンドで再レンダー（返り値は更新後の値）を試みます。

バックグラウンド？
低優先度の作業を後回しにして、ユーザーインターフェースの応答性を維持する手法です。
useDeferredValueを使うことで、明示的に低優先度の作業を指定できます。
これにより、高優先度のユーザーインターフェース(ユーザーの入力など)の更新が優先され、低優先度の更新は後回しにされます。

使用法

// 高負荷なコンポーネント
const ExpensiveComponent = memo(function ExpensiveComponent({ value }) {
  const items = Array.from({ length: 20000 }, (_, i) => (
    <div key={i}>{value}</div>
  ));
  return <div>{items}</div>;
});

export default function App() {
  const [inputValue, setInputValue] = useState('');
  const deferredValue = useDeferredValue(inputValue);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <label>
        Type :
        <input value={inputValue} onChange={handleChange} />
      </label>
      <p>遅延なし : {inputValue}</p>
      <p>遅延あり : {deferredValue}</p>
      <ExpensiveComponent value={deferredValue} />
    </div>
  );
}

ストレスなくTypeはできている同時に、優先度の低いレンダリングはいい感じに遅延してくれていることが確認できました。

参考 :

Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版）