React基礎｜useContextとは？使い方を説明

useContextとは？

useContext は <Provider> で囲まれた範囲内の子孫コンポーネントで、props を使わずに共有の値（状態・関数など）にアクセスするための機能。

🧠 1. CountContext を定義（context/CountContext.jsx）

import { createContext, useState } from "react";

export const CountContext = createContext();

export function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

export const CountContext = createContext();でコンテキストを定義する。

⚠️exportの書きかたについて

export const CountContext = createContext();とexport function CounterProvider({ children })...を二つ記述した場合、ESLintの警告が出る。

Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.eslint(react-refresh/only-export-components)

「1つのファイル内でコンポーネント以外の export（たとえば Context など）も一緒に定義すると、ホットリロードがうまく動かないことがあるから、分けてね」という警告

エクスポート方法をexport { CountContext, CounterProvider };という形にまとめると、警告はきえる。
これは一時的に警告が緩和しているだけで、根本的には「Context は非コンポーネントだから分けるべき」ということが推奨されている。

📺 2. 表示コンポーネント（components/Display.jsx）

import { useContext } from "react";
import { CountContext } from "../context/CountContext";

export default function Display() {
  const { count } = useContext(CountContext);
  return <p>Count: {count}</p>;
}

➕ 3. 増加ボタンコンポーネント（components/Increment.jsx）

import { useContext } from "react";
import { CountContext } from "../context/CountContext";

export default function Increment() {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount(c => c + 1)}>+1</button>;
}

🧩 4. アプリに組み込む（App.jsx）

import Display from "./components/Display";
import Increment from "./components/Increment";
import { CounterProvider } from "./context/CountContext";

function App() {
  return (
    <CounterProvider>
      <h1>カウンターアプリ</h1>
      <Display />
      <Increment />
    </CounterProvider>
  );
}

export default App;

<CounterProvider>で囲まれている子孫コンポーネント、<Display />と<Increment />コンポーネント内から <CounterProvider>の値にアクセスできる。

✅ ポイント

• CountContext は一度定義しておけば、どのファイルからでも import して useContext 可能。
• CounterProvider で囲った範囲内であれば、子孫コンポーネント全てが値にアクセスできる。
• 状態管理が必要なアプリをシンプルに保つために、このパターンは非常に便利。