React入門 練習問題 66：状態管理（派生状態の扱い）
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1200）
- 難易度 766位/2795問中
- 正答率 —（0回）
Reactで、既存のState（例：商品の価格と個数）から計算できる値（例：合計金額）を扱う場合の推奨されるアプローチとして、正しいものはどれか。
- 新たなStateを作らず、レンダリング時に既存のStateから直接計算して変数に代入する。
- 合計金額用の新しいStateを作り、価格や個数が変わるたびに useEffect で更新する。
- コンポーネントの外部にグローバル変数を定義し、価格や個数が変わった際にその変数へ代入する。
- 計算結果をブラウザのLocalStorageに保存し、画面に表示する際はそこから読み出して使う。
- 合計金額を計算するための専用の子コンポーネントを必ず作成し、そこにPropsとして計算式を渡す。
正解と解説を見る
既存のStateから計算できる値（派生状態）は、新たなStateを作らず、レンダリング時に既存のStateから直接計算して変数に代入するのが正解です。
【正解の理由】
Reactにおいて、State（＝コンポーネントが保持する状態）は最小限に保つのが原則です。「価格」と「個数」というStateがあれば「合計金額」はレンダリングのたびに `const total = price * quantity;` のように計算できます。これを独立したStateにすると、元の値と同期がズレるバグの原因になります。
【不正解の理由】
• 「合計金額用の新しいStateを作り、価格や個数が変わるたびに useEffect で更新する。」という説明は誤り（useEffectを使って派生状態を同期すると、無駄な再レンダリングが発生しパフォーマンスが悪化するため推奨されない）
• 「コンポーネントの外部にグローバル変数を定義し、価格や個数が変わった際にその変数へ代入する。」という説明は誤り（ReactはStateやPropsの変更を検知して画面を更新するため、外部の変数を書き換えても画面に反映されないため）
• 「計算結果をブラウザのLocalStorageに保存し、画面に表示する際はそこから読み出して使う。」という説明は誤り（LocalStorageは永続化のための仕組みであり、コンポーネント内の通常のデータ計算の置き場所としては不適切であるため）
• 「合計金額を計算するための専用の子コンポーネントを必ず作成し、そこにPropsとして計算式を渡す。」という説明は誤り（計算自体は同じコンポーネント内の通常の変数として処理すればよく、必ずしもコンポーネントを分ける必要はないため）