こんなに簡単なの？React Hook useContextでデータ共有

ReactのuseContextはコンポーネント間でのデータの受け渡しに関するHookです。useStateやuseReduceと合わせて利用することができます。まず本書では最も基本的な使用方法について説明を行いその後にuseStateを使った利用方法を説明します。本文書を読み終えるとuseContextがどのようなものかを理解することができます。

1 useContextとは
2 最も簡単な使用例
- 2.1 親コンポーネントでの設定
- 2.2 値を受け取るコンポーネントでの設定
3 useStateと一緒に使う
4 Context用のコンポーネントを作成
- 4.1 他のコンポーネントでも表示
- 4.2 関数を追加

useContextとは

通常親コンポーネントから子コンポーネントにデータを渡す際は、propsを介して行います。親から子、そのまた子といったように複数のコンポーネントを介してデータを渡すのはpropsでは煩雑になってきます。

ReactのContext APIを利用することでpropsを利用することなく下の階層のコンポーネントとデータの共有を行うことができます。propsに比べて覚えなければいけないことがいくつかあるのですべて暗記しようとせず実際に利用しないといけない時に本文書を読み直して復習してください。

最も簡単な使用例

App.jsファイルを一番親のコンポーネントとして、App.jsファイルに子コンポーネントAをimportし、コンポーネントAにコンポーネントB、コンポーネントBにコンポーネントCをimportした4階層のコンポーネントを作成します。

一番上の親コンポーネントであるApp.jsのファイルの中身は下記のようになります。ComponentA、B、Cについてはcomponentsディレクトリの下に作成していきます。


import React from 'react';
import './App.css';
import ComponentA from './components/ComponentA.js'

function App() {
  return (
    <div className="App">
      <h1>Learn useContext</h1>
      <ComponentA/>
    </div>
  );
}

export default App;

ComponentA


import React from 'react'
import ComponentB from './ComponentB'

const ComponentA = () => {
    return (
        <div>
            <p>Componet A</p>
            <ComponentB />
        </div>
    )
}

export default ComponentA

ComponentB


import React from 'react'
import ComponentC from './ComponentC'

const ComponentB = () => {
    return (
        <div>
            <p>Componet B</p>
            <ComponentC />
        </div>
    )
}

export default ComponentB

ComponentC


import React from 'react'

const ComponentC = () => {
    return (
        <div>
            <p>Componet C</p>
        </div>
    )
}

export default ComponentC

ブラウザで見ると下記のように表示されます。

App.jsから100という数字をuseContextを利用してComponetCに渡します。

親コンポーネントでの設定

まずApp.jsでContextの作成を行います。Contextの作成はcreateContextで行います。


export const UserCount = React.createContext()

作成したUserCountをexportしているのはContextを利用するComponentCでimportを行うためです。

次はUserCount.Providerコンポーネントで数字を渡したいコンポーネントが入っているComponentAを囲みます。UserCount.Providerのタグの中のvalueに100を設定します。UserCount.Providerというタグでわざわざ囲まないといけないという処理が必要ですがこれだけで親コンポーネントでの設定は完了です。ここまでの設定ではブラウザ上には何の変化もありません。


import React from 'react';
import './App.css';
import ComponentA from './components/ComponentA.js'

export const UserCount = React.createContext()

function App() {
  return (
    <div className="App">
      <h1>Learn useContext</h1>
      <UserCount.Provider value={100}>
      <ComponentA/>
      </UserCount.Provider>
    </div>
  );
}

export default App;

値を受け取るコンポーネントでの設定

今回はComponentCで値を受け取るのでComponenCのみ設定を行います。ComponentBなど他のコンポーネントでも設定方法は同じです。

ComponentCでuseContextを利用するためimportします。また、App.jsでexportしたUserCountはここでimportする必要があります。


import React,{useContext} from 'react'
import { UserCount } from '../App'

useContextとUserCountを使ってvalueで設定した値を取り出し変数countに入れます。


const count = useContext(UserCount)

これでcountをコンポーネントCで利用することができます。


import React,{useContext} from 'react'
import { UserCount } from '../App'

const ComponentC = () => {
    const count = useContext(UserCount)
    return (
        <div>
            <p>Componet C</p>
            <p>{count}</p>
        </div>
    )
}

export default ComponentC

ブウウザで確認し、Componet Cの文字列の下に100が表示されれば、App.jsで設定した値がComponet Cに渡されたことになります。

これがuseContextを使った最もシンプルな例です。

useStateと一緒に使う

先程は100という値だけuseContextを利用してComponentCに渡しましたが、今回はuseStateと一緒に利用します。

App.jsでuseStateをimportとして、useStateで設定したcountとsetCountをvalueに設定します。countの初期値は100に設定しています。


import React, { useState } from 'react';
import './App.css';
import ComponentA from './components/ComponentA.js';

export const UserCount = React.createContext();

function App() {
  const [count, setCount] = useState(100);
  const value = {
    count,
    setCount,
  };
  return (
    <div className="App">
      <h1>Learn useContext</h1>
      <UserCount.Provider value={value}>
        <ComponentA />
      </UserCount.Provider>
    </div>
  );
}

export default App;

ComponentCで先程と同様の方法で受け取ります。


import React,{useContext} from 'react'
import { UserCount } from '../App'

const ComponentC = () => {

    const { count, setCount } = useContext(UserCount);

    return (
        <div>
            <p>Componet C</p>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
}

export default ComponentC

受け取ったsetCountを利用してonClickイベントを利用してcountの値を増やします。

ボタンをクリックするとcount数字が1ずつ増えていくことが確認できます。ただの値だけではなくuseStateの値と関数もuseContextを利用してコンポーネント間で共有できることがわかりました。

Context用のコンポーネントを作成

先ほどはApp.jsファイルの中でcreateContextを実行していましたがより汎用的にするためにContext用のコンポーネントの作成を行います。コードも最初は正直わかりにくいとは思いますが先ほど記述したコードと比較しながら確認していけばどのような処理が行われているか理解できるかと思います。

srcフォルダの下にcontextフォルダを作成します。フォルダが作成できたらCountContext.jsファイルを作成します。

CountContext.jsファイルの中にはコンポーネント間で共有したいデータ、関数を記述します。


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

const CountContext = createContext();

export function useCountContext() {
  return useContext(CountContext);
}

export function CountProvider({ children }) {
  const [count, setCount] = useState(100);

  const value = {
    count,
    setCount,
  };

  return (
    <CountContext.Provider value={value}>{children}</CountContext.Provider>
  );
}

ContentContext.jsファイルの中でContextに関する処理をほとんど記述しているので他のコンポーネントでの記述量がほとんどありません。

App.jsファイルではCountContextコンポーネントからCountProvider関数をimportします。


import React from 'react';
import './App.css';
import ComponentA from './components/ComponentA.js';
import { CountProvider } from './context/CountContext';

function App() {
  return (
    <div className="App">
      <h1>Learn useContext</h1>
      <CountProvider>
        <ComponentA />
      </CountProvider>
    </div>
  );
}

export default App;

ComponentCコンポーネントではCountContextコンポーネントからuseCountContext関数をimportします。


import React from 'react';
import { useCountContext } from '../context/CountContext';

const ComponentC = () => {
  const { count, setCount } = useCountContext();

  return (
    <div>
      <p>Componet C</p>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default ComponentC;

ブラウザ上での表示に変化はありません。

他のコンポーネントでも表示

ComponentA, ComponentBでもデータが共有できているのか確認するためにComponetAではcountを表示できるように変更します。setCountは必要ないので必要なcountのみ利用します。


import React from 'react';
import ComponentB from './ComponentB';
import { useCountContext } from '../context/CountContext';

const ComponentA = () => {
  const { count } = useCountContext();
  return (
    <div>
      <p>Componet A</p>
      <ComponentB />
      <p>{count}</p>
    </div>
  );
};

export default ComponentA;

ComponentBではComponentCと同様にボタンを追加し、ボタンをクリックするとcountが増える設定を追加します。


import React from 'react';
import ComponentC from './ComponentC';
import { useCountContext } from '../context/CountContext';

const ComponentB = () => {
  const { count, setCount } = useCountContext();
  return (
    <div>
      <p>Componet B</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <ComponentC />
    </div>
  );
};

export default ComponentB;

ComponentCでは先ほどはcountを表示させていましたがCompnentAで表示させるため削除しています。ComponentAで引き続きcountを表示させても問題はありません。


import React from 'react';
import { useCountContext } from '../context/CountContext';

const ComponentC = () => {
  const { count, setCount } = useCountContext();

  return (
    <div>
      <p>Componet C</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default ComponentC;

どちらのボタンを押してもcount数はアップします。

関数を追加

count数を減らせすconuntDown関数をCountContext.jsファイルに追加して共有を行い、ComponentCで実行できるように変更を行います。

追加したcountDown関数は他のコンポーネントで利用するためにはvalueオブジェクトの中に追加する必要があります。


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

const CountContext = createContext();

export function useCountContext() {
  return useContext(CountContext);
}

export function CountProvider({ children }) {
  const [count, setCount] = useState(100);

  const countDown = () => {
    setCount(count - 1);
  };

  const value = {
    count,
    setCount,
    countDown,
  };

  return (
    <CountContext.Provider value={value}>{children}</CountContext.Provider>
  );
}

これでcountDown関数が他のコンポーネントでも利用可能になったのでComponentCを以下のように更新します。


import React from 'react';
import { useCountContext } from '../context/CountContext';

const ComponentC = () => {
  const { countDown } = useCountContext();

  return (
    <div>
      <p>Componet C</p>
      <button onClick={countDown}>-</button>
    </div>
  );
};

export default ComponentC;

ブラウザで確認すると”+”ボタンをクリックするとCountが増え、”-”ボタンをクリックするとCountが減ります。

useContextの利用方法簡単だと思ってもらえたのではないでしょうか。