【React】useDeferredValueで入力後の再レンダリングを遅延させる

React18で導入されたフック useDeferredValue で入力後の再レンダリングを遅延させる方法を知ったのでメモ

useDeferredValueは UI の一部の更新を延期できるReact Hook react.dev

useStateで管理する状態の変化を後回しにして、レンダリングを遅延させるものと解釈している

これを利用して、入力後の再レンダリングを遅延させる方法が公式ドキュメントにある

react.dev

例えば、テキストフィールドと、キー入力ごとに再レンダリングされる長いリストがあるとする

function App() {
  const [text, setText] = useState('');
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={text} />
    </>
  );
}

これは入力に入力するたびに SlowList が新しいプロパティを受け取り、ツリー全体を再レンダリングするので、入力行為が遅くなることがある

これをuseDeferredValueを使用するように変えれば、リストの更新を後回しにして入力をブロックしないようにすることができる

function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={deferredText} />
    </>
  );
}

以前にdebounce機能を実装したことがあるが、 uga-box.hatenablog.com

こんなに簡単なら useDeferredValue 導入した方が良いと思った

他参考

useDeferredValueの初期値｜React 19の新機能まるわかり

useDeferredValueについて理解する