Reactアプリケーションを構築する際、コンポーネント間のデータ連携は避けて通れない課題です。コンポーネントの階層構造や関係性に応じて、最適なデータ転送の手法を選択する必要があります。ここでは、代表的な5つのパターンを解説します。

1. 親コンポーネントから子コンポーネントへ（Props）

Reactにおける最も基本的で標準的なデータ転送方法です。データは「単一方向データフロー」に従い、親から子へと Props を介して渡されます。

// 親コンポーネント
const UserProfile = () => {
  const accountInfo = { nickname: "エンジニアA", role: "管理者" };
  return <DisplayBoard userInfo={accountInfo} />;
};

// 子コンポーネント
const DisplayBoard = ({ userInfo }) => {
  return (
    <div>
      <p>ユーザー: {userInfo.nickname}</p>
      <p>権限: {userInfo.role}</p>
    </div>
  );
};

2. 子コンポーネントから親コンポーネントへ（コールバック関数）

子コンポーネントで発生したイベントやデータを親に伝えたい場合は、親から子へ関数（コールバック）を渡し、子側でその関数を実行します。

// 親コンポーネント
const SearchContainer = () => {
  const handleSearch = (query) => {
    console.log("検索ワードを受信:", query);
  };

  return <SearchBar onSearchExecute={handleSearch} />;
};

// 子コンポーネント
const SearchBar = ({ onSearchExecute }) => {
  const triggerAction = () => {
    onSearchExecute("React Hooks");
  };

  return <button onClick={triggerAction}>検索実行</button>;
};

3. 兄弟コンポーネント間での連携（Stateの引き上げ）

直接の親子関係がない兄弟コンポーネント同士でデータを共有する場合、共通の親コンポーネントに状態（State）を「引き上げ」て管理します。

const Orchestrator = () => {
  const [sharedText, setSharedText] = useState("");

  return (
    <>
      <InputSource onTextChange={setSharedText} />
      <TextPreview content={sharedText} />
    </>
  );
};

const InputSource = ({ onTextChange }) => (
  <input type="text" onChange={(e) => onTextChange(e.target.value)} />
);

const TextPreview = ({ content }) => <p>入力内容: {content}</p>;

4. 深い階層間での受け渡し（Context API）

複数の階層を飛び越えてデータを渡す必要がある場合（Prop Drillingの回避）、Context API を使用して、明示的に Props を介さずにデータを共有できます。

const ThemeContext = React.createContext();

const AppWrapper = () => {
  const theme = { color: "dark", fontSize: "16px" };

  return (
    <ThemeContext.Provider value={theme}>
      <DeepNestedLayout />
    </ThemeContext.Provider>
  );
};

const DeepNestedLayout = () => {
  const config = React.useContext(ThemeContext);
  return <div style={{ color: config.color === "dark" ? "#fff" : "#000" }}>テーマ適用済み</div>;
};

5. グローバルな状態管理ライブラリ

アプリケーション全体で共有すべき複雑な状態がある場合は、外部のライブラリ（Zustand, Redux, Recoil, Jotaiなど）を導入するのが一般的です。これにより、どのコンポーネントからでも直接状態を参照・更新できるようになります。