useContextを理解する

useContext

propsは親から子に値を渡すために使用するがpropsをたくさんの中間コンポーネントを使って値を渡す場合、バケツリレーをしなければならなかったり、たくさんのコンポーネントからの参照が必要な場合はpropsの受け渡しでは不便なものになります。

useContextを使用する目的は、useContextを使えば親コンポーネントから明示的にpropsを渡されなくとも値を受け取ることです。

使用方法

1. コンテクストを作成する。

createContextに設定する値はデフォルト値となります。
コンテクストを提供せずにコンテクストを使用していた場合はデフォルト値が使用されます。

MyContext.tsx

import { createContext } from "react";

type User = {
  name: string;
  age: number;
};

export const MyContext = createContext<User>({
  name: "Taro",
  age: 20,
});

2. コンテクストを使用する

useContextを使用してMyContextから値を読み取るようにします。

User.tsx

import { useContext } from "react";
import { MyContext } from "./MyContext";

export const User = () => {
  const { name, age } = useContext(MyContext);
  return (
    <div>
      <div>私の名前は、{name}です。</div>
      <div>年齢は{age}歳です。</div>
    </div>
  );
};

3. コンテクストを提供する

コンテクストプロバイダでラップすることで、MyContextを使用可能になります。

下記の記述はこの<div>の下にあるコンポーネントが MyContext の値を要求した場合、
value内の値を渡せ」とReactに伝えていることになります。

App.tsx

import { User } from "./User";
import { MyContext } from "./MyContext";

export const Hook = () => {
  return (
    <div>
      <MyContext.Provider value={{ name: "Yamada", age: 30 }}>
        <User />
      </MyContext.Provider>
    </div>
  );
};

コードを全て合わせると画面上にはプロバイダが提供した値を表示できるようになりました。

参考