React入門 練習問題 56:フック(非同期レンダリング)
React 18で導入された `useTransition` フックの主な目的として正しいものはどれか。
- 優先度の低い状態更新をバックグラウンドで処理し、UIの応答性を保つ
- 複数のコンポーネント間で共有すべきグローバルな状態を効率よく管理する
- アニメーションの途中で別の画面へ遷移する際のエフェクトを定義する
- データの取得が完了するまでの間、代替となるローディング画面を表示する
- 複雑な計算結果をキャッシュし、不要な再レンダリング時の負荷を軽減する
正解と解説を見る
正解:優先度の低い状態更新をバックグラウンドで処理し、UIの応答性を保つ
useTransitionフックは、緊急性の低い状態更新の優先度を下げてバックグラウンドで処理し、UIの応答性を保つことが正解です。
【正解の理由】
検索キーワードの入力などの「即座に反映すべき緊急の更新」と、検索結果の表示などの「時間がかかってもよい優先度の低い更新」を分離し、ユーザーの操作をブロックさせずに画面を描画し直すために使用されます。
【不正解の理由】
• 「複数のコンポーネント間で共有すべきグローバルな状態を効率よく管理する」という説明は誤り。これはContext APIやReduxなどの状態管理ライブラリの役割です。
• 「アニメーションの途中で別の画面へ遷移する際のエフェクトを定義する」という説明は誤り。名前に「Transition(トランジション)」とありますが、CSSアニメーションを制御するための機能ではありません。
• 「データの取得が完了するまでの間、代替となるローディング画面を表示する」という説明は誤り。これはSuspenseの役割です。
• 「複雑な計算結果をキャッシュし、不要な再レンダリング時の負荷を軽減する」という説明は誤り。これはuseMemoフックの役割です。