createContext

const SomeContext = createContext(defaultValue)

• リファレンス
  • createContext(defaultValue)
  • SomeContext.Provider
  • SomeContext.Consumer
• 使用法
  • コンテクスト�?作成
  • ファイルから�?コンテクスト�?インポートとエクスポート
• トラブルシューティング
  • コンテクスト�?値を変更する方法が見つからない

リファレンス

createContext(defaultValue)

createContext をコンポーネント�?外部で呼び出してコンテクストを作成します。

import { createContext } from 'react';

const ThemeContext = createContext('light');

さらに例を見る

引数

• defaultValue: コンポーネントがコンテクストを読み取るときに、そ�?上�?ツリー内で対応するコンテクストプロバイダがない場合にコンテクストが持つ値です。デフォルト値が必要ない場合は null を指�?�します。デフォルト値は「最後�?手�?�」として使われるように意図されています。これは静的な値であり、時間が経過しても変化しません。

返り値

createContext はコンテクストオブジェクトを返します。

コンテクストオブジェクト自体は情報を持っていません。他�?コンポーネントがど�?コンテクストを読み取るか、または提供するかを表します。通常、上位�?コンポーネントで SomeContext.Provider を使用してコンテクスト�?値を指�?�し、下位�?コンポーネントで useContext(SomeContext) を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつか�?プロパティがあります：

• SomeContext.Provider では、コンポーネントにコンテクスト�?値を提供できます。
• SomeContext.Consumer は、コンテクスト�?値を読み取るため�?方法ですが、あまり使用されません。

SomeContext.Provider

コンポーネントをコンテクストプロバイダでラップすると、内部�?コンポーネントに対してこ�?コンテクスト�?値を指�?�できます。

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

props

• value: こ�?プロバイダ�?内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクスト�?値は任意�?型にすることができます。プロバイダ内で useContext(SomeContext) を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダ�? value を受け取ります。

SomeContext.Consumer

useContext が存在する前には、コンテクストを読み取る古い方法がありました：

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

こ�?古い方法はまだ動作しますが、新しく書かれたコードは useContext() を使ってコンテクストを読み取るべきです：

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

props

• children: 関数です。React は、useContext() と同じアルゴリズムによって�?�まる現在�?コンテクスト値で関数を呼び出し、そ�?関数から返される結果をレンダーします。親コンポーネントから�?コンテクストが変更されると、React はこ�?関数を再�?�行し、UI を更新します。

使用法

コンテクスト�?作成

コンテクストを利用することで、明示的に props を渡さずに、コンポーネントに深くまで情報を渡すことができます。

コンポーネント�?外部で createContext を呼び出して、コンテクストを 1 つまたは複数個作成します。

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext はコンテクストオブジェクトを返します。それを useContext() に渡すことで、コンポーネントからコンテクストを読み取ることができます：

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

デフォルトでは、コンポーネントが受け取る値は、コンテクストを作成するときに指�?�したデフォルト�?値になります。しかし、デフォルト�?値は決して変わらないため、これ自体では役に立ちませんね。

コンテクストが便利な�?は、コンポーネントから動的な値を提供できるからです：

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

これで、Page コンポーネントとそ�?内部�?すべて�?コンポーネントは、どんなに深くても、渡されたコンテクスト�?値を「見る」ことができます。渡されたコンテクスト�?値が変更されると、React はコンテクストを読み取るコンポーネントを再レンダーします。

コンテクスト�?読み取りと提供、例についてさらに読む

ファイルから�?コンテクスト�?インポートとエクスポート

異なるファイルにあるコンポーネントが同じコンテクストにアクセスする必要があることがよくあります。そ�?ため、一般的には別ファイルでコンテクストを�?�言します。他�?ファイルでコンテクストを利用できるようにするために、export 文を使用できます：

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

他�?ファイルで�?�言されたコンポーネントは、import 文を使用して、こ�?コンテクストを読み取ったり、提供したりすることができます：

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

これはコンポーネント�?インポートとエクスポートと同様に動作します。

トラブルシューティング

コンテクスト�?値を変更する方法が見つからない

こ�?ようなコードはデフォルト�?コンテクスト�?値を指�?�します：

const ThemeContext = createContext('light');

こ�?値は決して変わりません。React は、対応するプロバイダを上位�?コンポーネントで見つけられない場合に�?み、こ�?値をフォールバックとして使用します。

コンテクストを時間�?経過とともに変化させるには、state を追加し、コンポーネントをコンテクストプロバイダでラップします。