中級

Context

なぜ学ぶか： 「ログインユーザーの情報を、深い階層の部品でも使いたい」— propsで5階層バケツリレーするのは大変です。Contextは「共有データの放送局」— 途中の階層を飛ばして届けられます。例で見てみましょう。

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

// ① チャンネルを作る
const ThemeContext = createContext("light");

// ② 放送局: 配下のすべてに theme を配る
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <DeepCard />   {/* 何階層深くてもOK */}
    </ThemeContext.Provider>
  );
}

// ③ 受信機: 途中の階層を飛ばして直接受け取る
function DeepCard() {
  const theme = useContext(ThemeContext);
  return <p>現在のテーマ: {theme}</p>;
}

間の階層はthemeを知らなくても、深い部品に直接届きます。これが「階層飛ばし」です。

Context＝propsを使わないデータ配布網

例のProvider（放送局）で値を配り、useContext（受信機）でどの深さからでも受け取ります。

使いどころは「全体で共有する少数のもの」

テーマ（ダークモード）・ログインユーザー・言語設定が三大定番。このアプリのテーマ切替も同じ発想です。

何でもContextは間違い

頻繁に変わるデータや、一部でしか使わないデータには不向きです。「まずリフトアップ、それが辛ければContext」の順で考えます。

ステップ 1 / 3

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

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