React Academy · レッスン

Stateのリフトアップ：原則と例

Q: 「Stateのリフトアップ：原則と例」で何を学びますか？

共有stateを最も近い共通の祖先に移し、Propsで子へ渡します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

共有stateを最も近い共通の祖先に移し、Propsで子へ渡します

「Stateのリフトアップ：原則と例」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、stateのリフトアップパターンを学びます。共有するstateを最も近い共通の祖先へ移動することで、兄弟コンポーネントを同期させる方法です。

問題: 同期しない兄弟コンポーネント

2つの兄弟コンポーネントが同じデータを必要とする場合、それぞれで別々にstateを管理すると、同期ずれのバグにつながります。解決策は、共通の親へstateを移動することです。

共通の祖先を特定する

共有データを必要とする**両方の**コンポーネントの親になっている、最も近いコンポーネントを見つけます。そこへstateを移動し、プロパティとして子へ渡します。

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

カウンターをリフトアップする例

2つのコンポーネントが同じカウンターを表示するとします。それぞれでcountを管理するのではなく、親へリフトアップします。両方のコンポーネントがプロパティとしてcountを受け取り、onChangeコールバックを呼び出して更新します。

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

更新用のコールバックプロパティ

子コンポーネントは親のstateを直接変更できません。親は `onChange` のようなコールバックをプロパティとして渡します。子コンポーネントはstateの変更を要求したいときに、そのコールバックを呼び出します。

リフトアップ後の制御コンポーネントと非制御コンポーネント

stateをリフトアップすると、以前stateを所有していた子コンポーネントは**制御コンポーネント**になります。親から現在の値とonChangeを受け取り、親がstateの単一の信頼できる情報源になります。

複数階層にわたるリフトアップ

stateをツリー上で何階層も上へ移動する必要がある場合があります。多くの中間コンポーネントを越えてstateをリフトアップする必要があるなら、プロパティの受け渡しを避けるためにContextを検討してください。

stateをリフトアップする利点

stateをリフトアップすると、信頼できる情報源を1つにでき、データフローを予測しやすくなり（常に上から下へ流れます）、デバッグが簡単になります。さらに、後から同じstateを利用するコンポーネントを追加しやすくなります。

リフトアップしたstateから派生値を作る

リフトアップしたstateから派生値を親の中で計算し、追加のプロパティとして渡します。stateを重複して保持せず、派生させてください。

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

リフトアップが過剰になる場合

stateを4階層以上にわたってリフトアップしている場合は、コンポーネントツリーの構造が適切でないか、Contextやstate管理ライブラリを使う段階に来ている可能性があります。

確認問題

2つの兄弟コンポーネントが同じstateを共有する必要がある場合、正しいアプローチは何ですか？

復習

兄弟コンポーネント間でstateを共有する必要がある場合は、最も近い共通の祖先へリフトアップします。現在の値を下へ渡し、変更用のコールバックを上へ渡します。stateを重複させず、値は派生させてください。

次のレッスン：**Propsのバケツリレー：問題になる場合と問題にならない場合** — 問題のあるバケツリレーの連鎖を特定し、解決策が必要かどうかを判断します。

よくある質問