Context API とは

コンポーネントの「バケツリレー（Propsの多段渡し）」を回避し、アプリケーション全体や特定の範囲でデータを共有するための仕組みです。

useContext の使い方

useContext フックを使うと、共有データ（コンテキスト）をたった1行で取り出すことができます。入れ子が深くならず、コードが非常にシンプルになります。

import { createContext, useContext } from 'react';

// 1. コンテキストを作成
const ThemeContext = createContext('light');

const App = () => {
  return (
    // 2. Provider で値を供給（ここでは「dark」を渡す）
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  // 3. useContext で値を取得
  const theme = useContext(ThemeContext);
  return <p>現在のテーマ: {theme}</p>;
};

メリット

• バケツリレーの解消: 中間のコンポーネントが不要な Props を受け取る必要がなくなります。
• 可読性の向上: <Consumer> タグによる複雑な入れ子構造を避けられます。
• グローバルな管理: テーマ、言語設定、ログインユーザー情報などの「どこからでもアクセスしたい情報」の管理に最適です。