ステートを上げるとは、子コンポーネントからステートを共通の親に移動させることで、複数の子が同じデータを共有し、同期を保つようにすることです。これは、兄弟コンポーネント同士が調整する必要があるときの標準的なソリューションです。
なぜ重要なのか: 兄弟が共有データを必要とする
jsx
// ❌ each child has its OWN state — they can't sync
() { [temp, setTemp] = (); ... }
2つの兄弟コンポーネントがそれぞれ関連ステートの独自のコピーを保持している場合、それらが一貫性を保つ方法がありません — 一方を変更しても他方には影響を与えません。
function Calculator() {
const [temperature, setTemperature] = useState(0); // state LIFTED to the parent
return (
<>
{/* pass state DOWN as a prop, and a setter to update it */}
<TempInput scale="C" value={temperature} onChange={setTemperature} />
<TempInput scale="F" value={temperature} onChange={setTemperature} />
<p>Both inputs share one value: {temperature}</p>
</>
);
}
function TempInput({ value, onChange }) {
return <input value={value} onChange={e => onChange(e.target.value)} />;
}
共有ステートは親(Calculator)に配置されます。値を下にpropsとしてセッターと共に渡すため、子は変更をリクエスト(上に)できます。これで両方の入力が同じソースを反映します — 1つを編集すると両方が更新されます。
1. Find the closest COMMON ancestor of the components that need to share
2. Move the state UP into that ancestor
3. Pass the value DOWN as props
4. Pass a callback DOWN so children can request updates (data up via events)
これは、ステートを共有するために適用される同じ「データダウン、イベントアップ」フローです。
Lifting too high (state ends up far from where it's used) → prop drilling.
At that point, prefer Context or a state library instead of lifting further.
ステートを上げることは、コンポーネントベースのフレームワークで兄弟/関連コンポーネント間でステートを共有するための基本的なテクニックです — 共通の親に単一の情報源を保つため、子は同期を保ちます。
Context やストアを追加する前に、これは最初に手を出すツールであることがよくあります。
いつ上げるべきか(兄弟が調整する必要がある)を認識する — そしていつ上げすぎたか(prop drilling を引き起こしており、Context/ストアの時間です)を認識することは、コンポーネントステートを適切に構造化するために核となります。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する