Qraft(クラフト) 資格・学習クイズアプリ

React入門 練習問題 35:フック:再描画を伴わない値の保持

Reactにおいて、値を保持するが更新してもコンポーネントの再レンダリング(再描画)をトリガーしないフックとして正しいものはどれか。

  1. useRefを使用し、currentプロパティに値を保持する。
  2. useStateを使用し、初期値としてオブジェクトを渡す。
  3. useEffectを使用し、依存配列に空の配列を指定する。
  4. useContextを使用し、グローバルな状態として管理する。
  5. 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は計算結果を再利用してパフォーマンスを最適化するもので、値の直接的な変更・保持を目的としたものではない。

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)