React入門 練習問題 42:コンポーネントの最適化
Reactにおける`React.memo`の主な役割として正しいものはどれか。
- 親コンポーネントから渡されるPropsの型チェックを自動で行う。
- コンポーネント内で発生したエラーをキャッチし代替UIを出す。
- Propsが変更されていない場合、コンポーネントの再描画をスキップする。
- コンポーネント内の非同期処理が完了するまでローディングを出す。
- コンポーネントの初回レンダリング時の結果をサーバーに保存する。
正解と解説を見る
正解:Propsが変更されていない場合、コンポーネントの再描画をスキップする。
正解は、Propsが変更されていない場合、コンポーネントの再描画をスキップする、です。
【正解の理由】
`React.memo`は高階コンポーネント(HOC)であり、コンポーネントをラップすることで、渡されるPropsが前回と同じ(浅い比較で等価)である場合に再レンダリングをスキップし、パフォーマンスを最適化します。
【不正解の理由】
• 「親コンポーネントから渡されるPropsの型チェックを自動で行う」は誤り。型チェックはTypeScriptや`PropTypes`の役割です。
• 「コンポーネント内で発生したエラーをキャッチし代替UIを出す」は誤り。これはError Boundary(エラーバウンダリ)の役割です。
• 「コンポーネント内の非同期処理が完了するまでローディングを出す」は誤り。これは`Suspense`の役割です。
• 「コンポーネントの初回レンダリング時の結果をサーバーに保存する」は誤り。`React.memo`にサーバー保存の機能はありません。