ReactのcreateContext、useContextについて

createContextは、特定のデータや状態を効率的に渡す時に使用する。
useContextは、createContextで設定されたデータを扱いたい時に使用する。

まだアプリケーションの規模が小さければ、各コンポーネント毎にuseState()で状態管理を行えるが、規模拡大に伴いデータ管理が複雑化する。
そういう時は、Reactが用意している各種フックを適切に利用することが大事である。

よくある使用例が、カラーテーマの管理である。
以下の例では、クリックする毎に背景色と文字列表示を切り替える簡単なサンプルコードである。

この例ではコード量が少ないので1ファイルに纏めているが、別ファイルでcreateContextを宣言してエクスポートする事で、コンテクストを別ファイルで使用可能になる。
次に、使用したいファイルでインポートしてuseContextを宣言して、コンテクストを使用可能になる。

https://ja.react.dev/reference/react/createContext#usage

React公式ドキュメントcreateContextより抜粋

サンプルコード

import React, { useState, useContext, createContext } from "react";

const ThemeContext = createContext();

const App = () => {
  // 2. 状態と状態更新関数をuseStateで作成
  const [theme, setTheme] = useState("yellow-300");

  // 3. Context.Providerでテーマとテーマを変更する関数を提供
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div className={`bg-${theme}`}>
        <Toolbar />
      </div>
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  return (
    <div>
      <ThemeToggle />
      <Content />
    </div>
  );
};

const ThemeToggle = () => {
  // 4. useContextフックでテーマとテーマを変更する関数を取得
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={() =>
        setTheme(theme === "yellow-300" ? "blue-600" : "yellow-300")
      }
      className="rounded-md bg-gray-500 p-2"
    >
      Toggle Theme
    </button>
  );
};

const Content = () => {
  // 4. useContextフックでテーマを取得
  const { theme } = useContext(ThemeContext);

  return (
    <div className="content">
      <p>The current theme is {theme}</p>
    </div>
  );
};