useContext

const value = useContext(SomeContext)

• リファレンス
  • useContext(SomeContext)
• 使用法
  • ツリー�?深くにデータを渡す
  • コンテクスト経由で渡されたデータ�?更新
  • フォールバックとなるデフォルト値�?指�?�
  • ツリー�?一部でコンテクスト�?値を上書きする
  • オブジェクトや関数を渡すとき�?再レンダー�?最適化
• トラブルシューティング
  • プロバイダに渡した値が自分�?コンポーネントから見えない
  • 違うデフォルト値を指�?�している�?にコンテクストから常に undefined が返ってくる

リファレンス

useContext(SomeContext)

コンポーネント�?トップレベルで useContext を呼び出して、コンテクストを読み取り、サブスクライブします。

import { useContext } from 'react';

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

さらに例を見る

引数

• SomeContext: 事前に createContext で作成したコンテクストです。コンテクストとはそれ自体が情報を保持しているわけではなく、コンポーネントで提供 (provide) したり読み取ったりできる「情報�?�?別」を表すも�?です。

返り値

useContext は、呼び出したコンポーネントに対応するコンテクスト�?値を返します。値は、ツリー内で useContext を呼び出したコンポーネント�?上位かつ最も近い SomeContext.Provider に渡された value として決�?�されます。そ�?ようなプロバイダが存在しない場合は、返り値はそ�?コンテクスト�? createContext に渡した defaultValue になります。返り値は常にコンテクスト�?最新�?値です。React は、コンテクストに変更があると、それを読み取っているコンポーネントを自動的に再レンダーします。

注意点

• コンポーネント�? useContext() 呼び出しは、同じコンポーネントから返されるプロバイダ�?影響を受けません。対応する <Context.Provider> は、useContext() を呼び出すコンポーネント�?上にある必要があります。
• あるコンテクスト�?プロバイダが異なる value を受け取ると、当該プロバイダより下にありそ�?コンテクストを使用しているすべて�?子コンポーネントは、React によって自動的に再レンダーされます。前�?値と次�?値は、Object.is で比較されます。memo を使って再レンダーをスキップする場合でも、子コンポーネントがコンテクストから新しい値を受け取ることによる再レンダーは妨げられません。
• ビルドシステムが生成する出力�?中にモジュール�?重複がある場合（シンボリックリンクで起こり得る場合がある）、コンテクストが壊れる可能性があります。コンテクストを介した値�?受け渡しが動作する�?は、コンテクストを提供するために使用する SomeContext と、読み込むために使用する SomeContext が、=== による比較で厳密に同じオブジェクトである場合�?みです。

使用法

ツリー�?深くにデータを渡す

コンポーネント�?トップレベルで useContext を呼び出してコンテクストを読み取り、サブスクライブします。

import { useContext } from 'react';

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

useContext は渡したコンテクストに対応するコンテクスト�?値を返します。コンテクスト�?値を決�?�するために、React はコンポーネントツリーを探索し、そ�?コンテクストに対して最も近い上位�?コンテクストプロバイダを見つけます。

コンテクストを上記�? Button に渡すには、該当�?ボタンあるいはそ�?親コンポーネント�?いずれかを、対応するコンテクストプロバイダでラップします。

function MyPage() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  );
}

function Form() {
  // ... renders buttons inside ...
}

プロバイダと Button �?間にどれだけ多く�?コンポーネントが挟まっていても関係ありません。Form �?内部�?どこかで Button が useContext(ThemeContext) を呼び出すとき、値として "dark" を受け取ります。

コンテクスト経由で渡されたデータ�?更新

多く�?場合、時間とともにコンテクストを変化させたいと思うでしょう。コンテクストを更新するには、それを state と組み合わせます。親コンポーネントで state 変数を�?�言し、現在�? state をコンテクスト�?値としてプロバイダに渡します。

function MyPage() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <Button onClick={() => {
        setTheme('light');
      }}>
        Switch to light theme
      </Button>
    </ThemeContext.Provider>
  );
}

これにより、プロバイダ�?内部にある、ど�? Button も現在�? theme �?値を受け取るようになります。setTheme を呼び出してプロバイダに渡す theme 値を更新すると、すべて�? Button コンポーネントは新たな値である 'light' を使って再レンダーされます。

フォールバックとなるデフォルト値�?指�?�

React があるコンテクストに対応するプロバイダを親ツリーで見つけられない場合、useContext() が返すコンテクスト�?値は、コンテクストを作成したときに指�?�したデフォルト値と等しくなります：

const ThemeContext = createContext(null);

デフォルト値は絶対に変更されません。コンテクストを更新したい場合、上記で説明したように、state と組み合わせて使用します。

多く�?場合、null �?代わりにデフォルト値として使える、意味�?ある値があるはずです。例えば：

const ThemeContext = createContext('light');

こうすれば、対応するプロバイダなしにコンポーネントを間違ってレンダーしてしまっても、壊れることはありません。テスト環境でも、テストコードにプロバイダをたくさん設�?�せずともコンポーネントがうまく動作するようになります。

下記�?例では、“Toggle theme” ボタンはあらゆるテーマコンテクストプロバイダ�?外部にあり、かつテーマコンテクスト�?デフォルト値が 'light' であるため、常に light �?色調で表示されます。テーマ�?初期値を 'dark' に変更してみてください。

ツリー�?一部でコンテクスト�?値を上書きする

異なる値を持つプロバイダでツリー�?一部をラップすることにより、そ�?部分�?コンテクストを上書きできます。

<ThemeContext.Provider value="dark">
  ...
  <ThemeContext.Provider value="light">
    <Footer />
  </ThemeContext.Provider>
  ...
</ThemeContext.Provider>

プロバイダ�?ネストと上書きは必要なだけ行うことができます。

オブジェクトや関数を渡すとき�?再レンダー�?最適化

コンテクストを介して、オブジェクトや関数を含んだどんな値も渡すことができます。

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  function login(response) {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }

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

ここでは、コンテクスト�?値は、2 つ�?プロパティを持つ JavaScript オブジェクトであり、そ�?うち�? 1 つは関数になります。MyApp が再レンダーされるたびに（例えば、ページ遷移など）、これは異なる関数�?入った異なるオブジェクトを指すため、React はツリーにある useContext(AuthContext) を呼び出しているすべて�?コンポーネントを再レンダーしなければなりません。

小規模なアプリでは、問題になりません。ですが、currentUser �?ような内部�?データが変更されていないなら、再レンダーする必要はありません。データが変わっていないという事�?�を React が最大限に活用できるように、login 関数を useCallback でラップし、オブジェクト�?生成を useMemo でラップすることができます。これはパフォーマンス�?最適化です：

import { useCallback, useMemo } from 'react';

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  const login = useCallback((response) => {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }, []);

  const contextValue = useMemo(() => ({
    currentUser,
    login
  }), [currentUser, login]);

  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}

こ�?変更�?結果、MyApp が再レンダーする必要があっても、currentUser が変更されていない限り、useContext(AuthContext) を呼び出しているコンポーネントを再レンダーする必要はなくなります。

詳しくは useMemo と useCallback を参照してください。

トラブルシューティング

プロバイダに渡した値が自分�?コンポーネントから見えない

これが起こる一般的な理由はいくつかあります：

1. useContext() を呼び出しているコンポーネントと同じ（または下位�?）コンポーネントで <SomeContext.Provider> をレンダーしている。<SomeContext.Provider> を useContext() を呼び出すコンポーネント�?外側かつ上位に移動してください。
2. コンポーネントを <SomeContext.Provider> でラップし忘れているか、ツリー内�?思っている�?とは違う場所に配�?してしまっている。React DevTools を使ってツリー階層が正しいか確認してみてください。
3. プロバイダコンポーネントから見た SomeContext と、利用側�?コンポーネントから見た SomeContext が、ビルドツール�?問題により 2 つ�?異なるオブジェクトになっている。これは例えば、シンボリックリンクを使用している場合などに発生します。これを確認するために、それらを window.SomeContext1 や window.SomeContext2 �?ようなグローバル変数に割り当て、コンソールで window.SomeContext1 === window.SomeContext2 が成り立つか確認してみてください。もし同一でないなら、ビルドツール�?レベルで、そ�?問題を�?正する必要があります。

違うデフォルト値を指�?�している�?にコンテクストから常に undefined が返ってくる

ツリー�?中に value �?ないプロバイダがある�?かもしれません：

// 🚩 Doesn't work: no value prop
<ThemeContext.Provider>
   <Button />
</ThemeContext.Provider>

value を指�?�し忘れた場合、それは value={undefined} を渡す�?と同じです。

また、誤って props として違う名前を使っている�?かもしれません：

// 🚩 Doesn't work: prop should be called "value"
<ThemeContext.Provider theme={theme}>
   <Button />
</ThemeContext.Provider>

どちら�?場合も、React から�?警告がコンソールに表示されるはずです。�?正するには、props として value を使います：

// ✅ Passing the value prop
<ThemeContext.Provider value={theme}>
   <Button />
</ThemeContext.Provider>

createContext(defaultValue) で指�?�するデフォルト値は、ツリー�?上側に一致するプロバイダが一切存在しない場合に�?み使用されることに注意してください。親�?ツリー�?どこかに <SomeContext.Provider value={undefined}> �?ようなコンポーネントがあれば、useContext(SomeContext) を呼び出すコンポーネントはコンテクスト値としてそ�? undefined を受け取ります。