【React】useContextの使い方

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
react:18.2.0
react-dom:18.2.0

ReactのuseContextとは

useContextは、コンテキストを使用するためのReact Hookです。 Reactコンポーネントツリー全体に対して「グローバル」とみなすデータを利用するために設計されています。これにより、最下層までpropsバケツリレーをする必要がなくなります。 Contextを使用することで、コンポーネントツリー間でのデータの橋渡しが容易になり、すべての階層ごとにデータを渡す必要がなくなります。下の階層でもContextに格納されたデータに直接アクセスできるようになります。公式ドキュメント：https://ja.react.dev/reference/react/useContext

useContextの基本構文

useContextの基本構文は以下の通りです。


1const value = useContext(MyContext);

useContextの使い方


1// App.js
2import './App.css';
3import React, { createContext, useContext } from 'react';
4import ParentComponent from './components/ParentComponent';
5
6// Contextの値を定義
7const contextValue = {
8  info: 'コンテキストの読み込みに成功しました。',
9  context: 'コンテキストはMyContextです。',
10};
11
12// Contextを作成
13const MyContext = createContext(contextValue);
14
15// コンポーネント内でContextを使用するためのカスタムHookを定義
16export function useMyContext() {
17  return useContext(MyContext);
18}
19
20function App() {
21  return (
22    <MyContext.Provider value={contextValue}>
23      <div>
24        <h1>React Hooks Tutorial</h1>
25        <hr />
26        <h2>useContext</h2>
27        <ParentComponent />
28      </div>
29    </MyContext.Provider>
30  );
31}
32
33export default App;


1// components/ChildComponent.js
2import React from 'react';
3import { useMyContext } from '../App'; // App.jsからuseMyContextをインポート
4
5function ChildComponent() {
6  // Contextの値を取得
7  const data = useMyContext();
8
9  return (
10    <>
11        <p>{data.info}</p>
12        <p>{data.context}</p>
13    </>
14  );
15}
16
17export default ChildComponent; // ChildComponentをデフォルトエクスポート


1// components/ParentComponent.js
2import React from 'react';
3import ChildComponent from './ChildComponent';
4
5function ParentComponent() {
6  return <ChildComponent />;
7}
8
9export default ParentComponent;

この構造では、MyContextに格納されたデータが、ツリーの下層のどのコンポーネントでも簡単にアクセスできるようになります。 useMyContextカスタムHookを使用することで、MyContextの値を簡単に取得できます。

おわりに

ReactのuseContextの使い方について説明してきましたが、いかがだったでしょうか。 useContextによってどのコンポーネントでも扱うようなデータ（例えばユーザーのログイン情報など）をバケツリレーにすることなく受け渡しが容易になります。是非、ReactフックのuseContextを使いこなして、効率的なReactアプリケーションを作成しましょう。