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 を受け取ります。