React入門 練習問題 37:フック:パフォーマンスの最適化
Reactの「useMemo」フックの主な役割に関する説明として正しいものはどれか。
- 計算コストの高い処理の結果を保持し、不要な再計算を防ぐ役割を持つ。
- コンポーネントが画面に描画された直後に、非同期でデータを取得する。
- 関数コンポーネント内で、ローカルな状態変数を作成して保持し続ける。
- 複数のコンポーネント間で、共通のロジックを再利用可能な関数にする。
- 親コンポーネントから渡された関数を、子コンポーネントで実行させる。
Qraftユーザーの成績:正答率 60%(6/10回正解)
正解と解説を見る
正解:計算コストの高い処理の結果を保持し、不要な再計算を防ぐ役割を持つ。
useMemoの役割は、計算コストの高い処理の結果を保持し、不要な再計算を防ぐことが正解です。
【正解の理由】
useMemoは指定した依存配列の値が変化したときのみ再計算を行うため、レンダリングのたびに重い処理が実行されるのを防ぎ、パフォーマンスを最適化する役割を持ちます。
【不正解の理由】
• 「コンポーネントが画面に描画された直後に、非同期でデータを取得する」は誤り。これはuseEffectフックの主な役割である。
• 「関数コンポーネント内で、ローカルな状態変数を作成して保持し続ける」は誤り。状態変数の作成と保持はuseStateフックの役割である。
• 「複数のコンポーネント間で、共通のロジックを再利用可能な関数にする」は誤り。これはカスタムフックを作成する目的である。
• 「親コンポーネントから渡された関数を、子コンポーネントで実行させる」は誤り。関数をそのまま渡すだけなら通常のpropsで可能であり、関数の再生成を防ぐならuseCallbackフックを使用する。