React入門 練習問題 35:フック:再描画を伴わない値の保持
Reactにおいて、値を保持するが更新してもコンポーネントの再レンダリング(再描画)をトリガーしないフックとして正しいものはどれか。
- useRefを使用し、currentプロパティに値を保持する。
- useStateを使用し、初期値としてオブジェクトを渡す。
- useEffectを使用し、依存配列に空の配列を指定する。
- useContextを使用し、グローバルな状態として管理する。
- useMemoを使用し、計算結果をメモ化してキャッシュする。
Qraftユーザーの成績:難易度 Dランク(レーティング1116)・正答率 71%(10/14回正解)
レーティングは解いた人の実力と正誤から算出する難しさ(初期値1200)。ランクはその全問題中の順位(S+が最難関、F-が最易)
正解と解説を見る
正解:useRefを使用し、currentプロパティに値を保持する。
Reactにおいて、値を保持しながらもコンポーネントの再レンダリング(=画面の再描画)をトリガーしないフックは、useRefが正解です。
【正解の理由】
useRefフックは「current」というプロパティを持つオブジェクトを返し、この値を更新してもコンポーネントは再レンダリングされません。DOM要素の参照や、タイマーIDなどの状態保持によく使われます。
【不正解の理由】
• 「useStateを使用し、初期値としてオブジェクトを渡す」は誤り。useStateは値を更新すると再レンダリングが発生する。
• 「useEffectを使用し、依存配列に空の配列を指定する」は誤り。useEffectは副作用(=データ取得やDOM操作などの外部とのやり取り)を扱うためのもので、値の保持には使わない。
• 「useContextを使用し、グローバルな状態として管理する」は誤り。useContextはコンポーネントツリー全体でデータを共有するためのもの。
• 「useMemoを使用し、計算結果をメモ化してキャッシュする」は誤り。useMemoは計算結果を再利用してパフォーマンスを最適化するもので、値の直接的な変更・保持を目的としたものではない。