React入門 練習問題 57：コンポーネント間の連携
Reactにおいて、兄弟関係にある複数のコンポーネント間で状態（State）を共有したい場合、推奨される一般的な設計アプローチとして正しいものはどれか。
- 状態を最も近い共通の親コンポーネントへ移動させ、そこから各子へプロパティとして渡す
- 各兄弟コンポーネントが別々に状態を持ち、イベントバスを通じて相互に変更を通知し合う
- 状態を直接DOM要素のデータ属性に書き込み、そこから別のコンポーネントが読み取る
- ブラウザのローカルストレージに状態を保存し、各コンポーネントがタイマーで監視する
- カスタムイベントを発火させ、グローバルオブジェクトであるwindowに状態を保持させる
正解と解説を見る
正解：状態を最も近い共通の親コンポーネントへ移動させ、そこから各子へプロパティとして渡す
兄弟コンポーネントで状態を共有するには、状態を最も近い共通の親コンポーネントへ引き上げ（Stateのリフトアップ）、そこから各子コンポーネントへ渡すアプローチが正解です。
【正解の理由】
Reactのデータフローは上から下への単方向であるため、親が状態を一元管理し、子にはprops（＝プロパティ）として状態や更新用の関数を渡すことで、兄弟間のデータを同期させるのが基本設計です。
【不正解の理由】
• 「各兄弟コンポーネントが別々に状態を持ち、相互に変更を通知し合う」という説明は誤り。コンポーネント同士が複雑に絡み合うとデータの流れが追えなくなるため推奨されません。
• 「状態を直接DOM要素のデータ属性に書き込み、そこから読み取る」という説明は誤り。Reactの仮想DOMの仕組みをバイパスする操作であり、状態管理の基本から外れています。
• 「ブラウザのローカルストレージに状態を保存し、タイマーで監視する」という説明は誤り。パフォーマンスが悪化する上、不要な複雑さを招きます。
• 「カスタムイベントを発火させ、グローバルオブジェクトに状態を保持させる」という説明は誤り。グローバル変数に依存するとコンポーネントの独立性が失われてしまいます。