【React】 Context の使い方

はじめに

本記事はシリーズものです。

通常、React では props を通じて親コンポーネントから子コンポーネントへ値や関数の受け渡しを行います。
しかし、特定のケースにおいてはこれが面倒に感じてしまうパターンがあります。

いわゆるprops のバケツリレーが発生してしまうんですね。

これの回避のために、React では Context というものが用意されています。
今回はこの Context についてのお話を 3 回に分けてお話しします。

第 1 回では「Context いつ使用するべきでいつ使用するべきではないか」
第 2 回では「Context の使い方」 ← イマココ
第 3 回では「Context を使う際にどんなことに気をつければいいか」

についてお話しします。

Context の使い方

Context では付属する Provider コンポーネントにより、囲まれた範囲に値を配布します。
以下の AuthenticationProvider では、認証情報を子であるComponentに対し配布しています。

pages/_app.tsx

import { AuthenticationProvider } from "@/AuthenticationProvider";
import type { AppProps } from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthenticationProvider>
      <Component {...pageProps} />
    </AuthenticationProvider>
  );
}

Context の作り方

createContextを用いContextを作成します。

AuthenticationProvider.tsx

import { createContext } from "react";

type User = {
  uid: string;
  email: string;
  name: string;
}

const Context = createContext<User | null>(null);

Context Provider の作り方

先ほどの Context には Provider コンポーネントが付属しています。
valueには配布したいものを渡します。
今回の場合、user 情報が渡したいので、useAuthという hooks から入手したユーザーステートを渡します。

AuthenticationProvider.tsx

import { createContext } from "react";

type User = {
  uid: string;
  email: string;
  name: string;
}

export const AuthenticationContext = createContext<User | null>(null);

export const AuthenticationProvider: FC<{ children: ReactNode }> = ({
  children,
}) => {
  const { user } = useAuth();
  if (!user) return <p>Loading...</p>;

  return <AuthenticationContext.Provider value={user}>{children}</AuthenticationContext.Provider>;
};

このようにしておけば、user 情報を子コンポーネントたちに配布できるわけですね。

Context Provider で配布された値を使う

useContextという hooks が提供されているので、先ほど作った Context を引数に渡します。

Children.tsx

import { useContext } from "react";
import { AuthenticationContext } from "./AuthenticationProvider";

export const Children = () => {
  const user = useContext(AuthenticationContext);
  return <div>{user?.uid}</div>;
};

これだけで何重にネストしていても user ステートにアクセスできるようになりました。

まとめ

いかがでしたでしょうか？
今回は、Context の使い方について話しました。

便利な反面、使い方を誤ると保守性が崩れていってしまったりするので、次回は「Context を使う際にどんなことに気をつければいいか」について書いていければと思います。