【React】useContextの使い方 | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 ReactのuseContextとは
3 useContextの基本構文
4 useContextの使い方
5 おわりに

開発環境

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の基本構文は以下の通りです。

const value = useContext(MyContext);

1	const value = useContext(MyContext);

useContextの使い方

useContextの具体的な使い方を説明していきます。

import './App.css';
import React, { createContext, useContext } from 'react';
import ParentComponent from './components/ParentComponent';

// Contextの値を定義
const contextValue = {
  info: 'コンテキストの読み込みに成功しました。',
  context: 'コンテキストはMyContextです。',
};

// Contextを作成
const MyContext = createContext(contextValue);

// コンポーネント内でContextを使用するためのカスタムHookを定義
export function useMyContext() {
  return useContext(MyContext);
}

function App() {
  return (
    <MyContext.Provider value={contextValue}>
      <div>
        <h1>React Hooks Tutorial</h1>
        <hr />
        <h2>useContext</h2>
        <ParentComponent />
      </div>
    </MyContext.Provider>
  );
}

export default App;

import './App.css';

import React, { createContext, useContext } from 'react';

import ParentComponent from './components/ParentComponent';

// Contextの値を定義

const contextValue = {

info: 'コンテキストの読み込みに成功しました。',

context: 'コンテキストはMyContextです。',

};

// Contextを作成

const MyContext = createContext(contextValue);

// コンポーネント内でContextを使用するためのカスタムHookを定義

export function useMyContext() {

return useContext(MyContext);

}

function App() {

return (

<MyContext.Provider value={contextValue}>

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>useContext</h2>

</div>

</MyContext.Provider>

);

}

export default App;

import React from 'react';
import { useMyContext } from '../App'; // App.jsからuseMyContextをインポート

function ChildComponent() {
  // Contextの値を取得
  const data = useMyContext();

  return (
    <>
        <p>{data.info}</p>
        <p>{data.context}</p>
    </>
  );
}

export default ChildComponent; // ChildComponentをデフォルトエクスポート

import React from 'react';

import { useMyContext } from '../App'; // App.jsからuseMyContextをインポート

function ChildComponent() {

// Contextの値を取得

const data = useMyContext();

return (

<p>{data.context}</p>

</>

);

}

export default ChildComponent; // ChildComponentをデフォルトエクスポート

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return <ChildComponent />;
}

export default ParentComponent;

import React from 'react';

import ChildComponent from './ChildComponent';

function ParentComponent() {

return <ChildComponent />;

}

export default ParentComponent;

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

useMyContextカスタムHookを使用することで、MyContextの値を簡単に取得できます。

おわりに

ReactのuseContextの使い方について説明してきましたが、いかがだったでしょうか。

useContextによってどのコンポーネントでも扱うようなデータ（例えばユーザーのログイン情報など）をバケツリレーにすることなく受け渡しが容易になります。

是非、ReactフックのuseContextを使いこなして、効率的なReactアプリケーションを作成しましょう。