Reactの「重い処理」を飼い慣らせ：useDeferredValueによるUIスレッド防衛術
フロントエンドの現場で、「入力するたびに画面がカクつく」「検索結果のレンダリングが重くてタイピングが追いつかない」といった問題に直面したことはないだろうか。
Reactを触り始めて数年。中級者に差し掛かった君たちが次に乗り越えるべき壁は、「メインスレッドの占有」という怪物だ。今回は、React 18から導入された最強の武器の一つ、`useDeferredValue`を使って、この怪物をいかにして制御するか、現場の泥臭い知見を交えて伝授しよう。
—
1. なぜ「重い処理」はユーザー体験を破壊するのか
まず、ブラウザの裏側で起きていることを整理しよう。Reactのレンダリングは基本的に同期的に行われる。ユーザーがキーボードを叩くと、イベントハンドラが走り、Stateが更新され、仮想DOMの差分が計算され、ブラウザの描画パイプラインへ流し込まれる。
もし、このState更新に伴って「1,000件のリストのフィルタリング」や「複雑なデータの整形」といった重い計算が走るとどうなるか？ メインスレッドは計算に忙殺され、ブラウザは「次のフレーム」を描画できなくなる。これが俗に言う「ドロップフレーム（カクつき）」の正体だ。
これまでは、`debounce`や`throttle`といったライブラリに頼るのが常套手段だった。だが、それらは「タイミング」を人間が強引に調整するハックに過ぎない。React 18以降は、フレームワークの心臓部が「何が緊急で、何が後回しでいいのか」を理解できるようになったんだ。
—
2. useDeferredValueの正体：優先順位の再定義
`useDeferredValue`は、値の更新を「緊急性の低いもの」としてReactのレンダリングパイプラインにマークするフックだ。
仕組みはシンプルだ。
1. Reactはまず、即時必要なUI（入力フォームの文字反映など）を優先してレンダリングする。
2. `useDeferredValue`でラップされた値の変更は、「余裕があるとき」に裏で計算し直す。
3. 計算が終わった瞬間に、新しい値でUIを再描画する。
これによって、「入力のレスポンスは爆速」を保ちつつ、「重い処理の結果は少し遅れてやってくる」という、実用上最も快適な体験を作れる。
—
3. 実践：検索リストの最適化サンプル
百聞は一見にしかず。検索フィルタリングを例に、コピペしてそのまま現場で使えるパターンを示す。
import React, { useState, useDeferredValue, useMemo } from ‘react’;
/
- 現場でよくある「重いリスト検索」の例
/
const SearchComponent = ({ data }) => {
const [query, setQuery] = useState(”);
// 1. ユーザーの入力を「遅延」させる
// ユーザーがタイピングしている間、この値は古いままキープされる
const deferredQuery = useDeferredValue(query);
// 2. 遅延された値を使って、重い計算（フィルタリング）を行う
// useMemoで包むことで、deferredQueryが変わった時だけ再計算させる
const filteredList = useMemo(() => {
console.log(‘重い計算を実行中…’);
return data.filter((item) => item.includes(deferredQuery));
}, [deferredQuery, data]);
return (
placeholder=”検索ワードを入力…”
/>
{/
ここでポイント！
queryとdeferredQueryが異なる間は「古いレンダリング結果」が表示されている。
ユーザーには「処理中」であることが伝わるようにUIでケアするのがプロの仕事だ。
/}
{query !== deferredQuery &&
検索中…
}
-
{filteredList.map((item, index) => (
- {item}
))}
);
};
—
4. シニアからのアドバイス：使いどころを見極めろ
このフックは魔法ではない。適材適所で使わないと、逆にコードが複雑化するだけだ。以下の点に注意してほしい。
- 「何でもラップしない」:
単なるテキストの表示更新のような軽い処理に使う必要はない。あくまで「Stateの変化が重い計算のトリガーになっている場合」に限定しよう。
- 「視覚的なフィードバックを忘れない」:
`query !== deferredQuery`のような判定を使い、検索中であることをユーザーに明示すること。無言で結果が切り替わるのは、ユーザーに「バグかな？」という不安を与える。
- 「まずは計測」:
React DevToolsの「Profiler」を使って、実際にレンダリング時間が伸びているかを確認しよう。勘で最適化するのは、エンジニアとして一番やってはいけないことだ。
まとめ
`useDeferredValue`の真の価値は、「ユーザーの入力」という「最優先事項」を絶対に守りつつ、計算コストの高いタスクを裏側に追い出せることにある。
Reactのパフォーマンスチューニングは、いかにブラウザのメインスレッドを「空けておくか」という陣取り合戦だ。公式マニュアルを暗記するだけでなく、裏で何が起きているかを想像しながらコードを書く。その習慣が、君をただの「Reactが書ける人」から「システムを設計できるエンジニア」へと引き上げるはずだ。
さあ、エディタを開いて、君のアプリケーションの「重い場所」を一つずつ救い出してやってくれ。何か詰まったら、いつでも聞きに来いよ。
コメント