useContextとは

本来Reactでの親コンポーネントから子のコンポーネントへデータを渡す際はPropsでおこなわれます

ですが、複数の複雑化したコンポーネントがあった場合、Propsを経由してバケツリレー状態のデータを渡していくのは最善の方法とは言えません。

ReactのContext APIを利用すれば、データを子コンポーネントに渡す際にPropsを利用する事なく、下の階層にあるコンポーネントとシンプルにデータの受け渡しが容易になります。

Context APIはデータの数値、関数、オブジェクトこれらを渡す時に非常に便利です。

簡単な使用例で学びましょう。

useContextフック使い方

create-react-app(CRA)での解説となります。

まずは最上位である親コンポーネントのApp.jsファイルから、子のコンポーネントに渡されたデータを取得します。

当記事ではContextRoot.Providerというタグでラップして処理が必要となります。

// App.js

<ContextRoot.Provider value={data}>
      <Child />
</ContextRoot.Provider>

それをせずに使用する方法もあります。

// App.js

import Child from "./components/Child";
import ContextRoot from "./ContextRoot";

const data = {
  number: 123,
  text: "テスト",
  funcAlert: () => {
    alert("Hello, Welcome");
  }
}

const App = () => {
return (
<ContextRoot.Provider value={data}>
      <Child />
</ContextRoot.Provider>
  );
}

export default App;

オブジェクトのdataにはそれぞれ値を持たせます。

const data = {
  number: 123,
  text: "テスト",
  funcAlert: () => {
    alert("Hello, Welcome");
  }
}

ContextRoot.Providerのタグ内のvalueはPropsの役割でありオブジェクトのdateを渡します。

この値は、そのすべての子とその子孫が利用できるようになります。

つまり、サブツリー全体でuseContextフックを使用して値を読み取ることができます。

App.jsファイルが存在する同じ階層に、ContextRoot.jsというファイルを作成します。

このファイルは、ルートのファイルとなりContextの作成はcreateContextで行います。

// ContextRoot.js

import { createContext } from 'react';

const ContextRoot = createContext();

expot default ContextRoot;

createContextはコンテキストインスタンスを作成する為のものとなります。

そのため、コンテキストを作成し初期化をします。

createContextの引数は元々初期値はありません。

createContextの引数にデフォルトの値を渡した場合ではReactのドキュメントによると、デフォルト値を指定すると『コンポーネントをラップせずに個別にテストするのに役立つ可能性がある』と明記してあります。

ですので、デフォルト値が役立つ状況がありますが、ほとんどの場合はデフォルト値は不要または有用ではありません。

それでは、App.jsのdataを渡して取得していきましょう。

新しくComponentsというフォルダを作成して下さい。

その中に、Child.jsとGrandChild.jsの2つの新しいファイルを作成して下さい。

これは、子のコンポーネントと孫のコンポーネントファイルとなります。

// Child.js

import GrandChild from "./GrandChild";

const Child = () => {
  return <GrandChild />;
};

export default Child;

// GrandChild.js

import { useContext } from "react";

import ContextRoot from "../ContextRoot";

const GrandChild = () => {

const data = useContext(ContextRoot);

return (
<div>
<p>{data.number}</p>

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

<button onClick={data.funcAlert}>ボタン</button>

</div>
  );
};

export default GrandChild;