中級

状態の置き場所（リフトアップ)

なぜ学ぶか： 「検索ボックスの入力で、隣の一覧を絞り込みたい」— このときstateをどこに置くかがReact設計の核心です。答えは「共有する2人の、共通の親に置く」。例で見てみましょう。

まずはこの例を見てみましょう

// 親: 検索欄と一覧の「両方」が使う state は、共通の親に置く
function SearchPage() {
  const [keyword, setKeyword] = useState("");

  return (
    <div>
      <SearchBox value={keyword} onChange={setKeyword} />
      <FruitList keyword={keyword} />
    </div>
  );
}
// 子①（SearchBox）: 入力を親に伝える
// 子②（FruitList）: 親から keyword を受け取って絞り込む

state（keyword）は親に1つだけ。子①が変更を依頼し、子②が受け取って使う — この形をリフトアップと呼びます。

stateは「使う人たち」の共通の親へ

1つの部品だけが使うならその中に。例のように兄弟で共有するなら、共通の親に置いてpropsで配ります。

同じstateを2箇所に持たない

検索欄と一覧が別々にkeywordを持つと、2つの値がズレて壊れます。「信頼できる置き場所は1つ」が原則です。

データは下り、変更依頼は上る

親→子へはpropsでデータが下り、子→親へはonChangeのような関数で「変更の依頼」が上ります。Reactの一方通行の流れです。

ステップ 1 / 3

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。