3階層以上になってくるとpropsをバケツリレーすることになります。親から孫に値を渡すときに一度子を挟まなくてはなりません。これを回避する仕組みがuseContextになります。

useContextのメリット

useContextを使うとUIとロジックを分離することができます。下記のようなメリットがあります。

• propsのバケツリレーが無くなる（親から孫へ直接値を渡せる）
• 複数のコンポーネントで同じ状態を操作できる
• ステートとイベントハンドラーを１ヶ所で管理できる

ファイル構成

• components　ディレクトリ
  • –B.js
  • –C.js
• contexts　ディレクトリ
  • –ContextTest.js
• Appjs ファイル

「src」ディレクトリの直下に「contexts」ディレクトリを作ります。ここでcontextを管理します。

import {createContext} from 'react'

const ContextTest = createContext()
export default ContextTest

ContextTestという変数を作成し、createContext()関数でContextオブジェクトを代入しています。export default ContextTest　を記載し、他で使えるようにします。これでcontextを使う下準備は完了です。

import './App.css';
import ContextTest from './contexts/ContextTest';
import B from './components/B';

function App() {
　　return (
　　　　　　<ContextTest.Provider value={'AからCに値を渡したものを表示'} >
　　　　　　<B />
　　　　　　</ContextTest.Provider>
  );
}
export default App;

「import ContextTest from ‘./contexts/ContextTest’;」

App.js」でcontextが使えるように、contextディレクトリ内に作成した「ContextTest.js」をインポートします。

「import B from ‘./components/B’;」B.jsを使えるようにこちらもインポート。

このような記載になります。<ContextTest.Provider value={‘AからCに値を渡したものを表示’} >

returnの中でContextを使いたい部分を　　<ContextTest.Provider></ContextTest.Provider>で囲います。今回はここからCに値を直接渡したいので、渡す値をvalueで設定しています。

App.jsでBを読み込む。BでさらにCを読み込む。値はAからCに渡すという流れになるので、

<ContextTest.Provider></ContextTest.Provider>の中に<B />を記載します。

次にB.jsを作成します。

B.jsはC.jsを読み込んで表示するだけです。

import React from 'react'
import C from './C'

const B = () => {
  return (
    <div>
      <h3>Bコンポーネントの表示</h3>
      <C />
    </div>
  )
}

export default B

「C.js]にはApp.jsからContextで受け取った値を表示するプログラムを記載します。

import React from 'react'
import {useContext} from 'react'
import ContextTest from '../contexts/ContextTest'

const C = () => {
    const value = useContext(ContextTest)
  return (
    <div>
      {value}
    </div>
  )
}

export default C

まずはcontextをインポートします。「import ContextTest from ‘../contexts/ContextTest’」

「const value = useContext(ContextTest)」

CotextTetをvalueという変数に代入します。

returnの中の表示させたい部分に [value]を記載します。

これでApp.jsで設定した値を直接Cに表示できるようになります。

（表示結果）