React入門 練習問題 44：パフォーマンス最適化
Reactにおいて、`React.lazy`と`<Suspense>`を組み合わせて使用する主な目的として正しいものはどれか。
- コンポーネントの初回レンダリングを遅延させ、アニメーションを滑らかにする。
- コンポーネントのコードを分割し、必要になったタイミングで非同期に読み込む。
- コンポーネント内で発生した非同期処理のエラーをキャッチし、再試行を行う。
- コンポーネントのレンダリング結果をブラウザのキャッシュに長期間保存する。
- コンポーネントのPropsの型推論を遅延評価し、ビルドの速度を向上させる。
Qraftユーザーの成績：難易度 Sランク（レーティング1375）・正答率 17%（2/12回正解）
レーティングは解いた人の実力と正誤から算出する難しさ（初期値1200）。ランクはその全問題中の順位（S+が最難関、F-が最易）
正解と解説を見る
正解：コンポーネントのコードを分割し、必要になったタイミングで非同期に読み込む。
正解は、コンポーネントのコードを分割し、必要になったタイミングで非同期に読み込む、です。
【正解の理由】
`React.lazy`を使用すると、コンポーネントの動的インポート（コードスプリッティング）が可能になります。これを`<Suspense>`で囲むことで、そのコンポーネントのJavaScriptファイルが実際に必要になるまで読み込みを遅延させ、読み込み中はフォールバック（ローディングUIなど）を表示することができます。これにより初期ロードのパフォーマンスが向上します。
【不正解の理由】
• 「コンポーネントの初回レンダリングを遅延させ、アニメーションを滑らかにする」は誤り。アニメーションの最適化が主目的ではありません。
• 「コンポーネント内で発生した非同期処理のエラーをキャッチし、再試行を行う」は誤り。エラーハンドリングはError Boundaryの役割です。
• 「コンポーネントのレンダリング結果をブラウザのキャッシュに長期間保存する」は誤り。キャッシュの保存機能ではありません。
• 「コンポーネントのPropsの型推論を遅延評価し、ビルドの速度を向上させる」は誤り。TypeScriptの型推論やビルド速度の話とは無関係です。