【React】useContextマジ半端ないって【Hook】

こんにちは！nomurabbitです。今回はuseContextについて紹介したいと思います。

useState、useEffectの概要は、こちらの記事をご覧ください。

nomurabbit.hatenablog.jp

Reactのデータ受け渡し
useContextの使い方
React useContextのうごき
React useContextの使いどころ
まとめ

Reactのデータ受け渡し

Reactのコンポーネント間でデータをやりとりする方法は、親から子へpropsで渡すという方法があります。今回紹介するuseContextも、コンポーネント間でデータをやり取りする方法です。ただ、このuseContextという機能、Reactのコンポーネントツリー内で共通変数を扱う上でこの上なく便利な機能なんです。この記事では、使い方や本番での使いどころを、サンプルプログラムや動画を交えて紹介していきます。

それでは、まずは使い方からご覧ください！

useContextの使い方

まずは共通変数を保持するためのコンポーネントを作成します。このコンポーネントはReactコンポーネントツリーの親になるので、propsとして子のコンポーネントを受け取れるようにしておきましょう。具体的にはpropsにReact.ReactNode型の要素を定義しましょう。

interface Props {
    children: React.ReactNode;
}

次に同じコンポーネントに通変数を保持するコンテキストを定義します。createContextにコンテキストの型と初期値を渡してあげればOKです。下の例ではIauthContextが型でinitializeAuthContextが初期値となります。型の要素は文字列や数値のほか、関数を定義できるのでセッターを定義しておくとGoodです。また、コンテキストは定数（const）で指定してしまって問題ありません。

interface IauthContext {
    userId: string;
    setUserId: (name: string) => void;
}

const initializeAuthContext = {
    userId: "",
    setUserId: () =>{}
}

export const AuthContext = createContext<IauthContext>(initializeAuthContext);

以上で親コンポーネントは準備完了です。index.tsxで子コンポーネントを囲って、子コンポーネントから親のコンテキストにアクセスしてみましょう。

index.tsx

ReactDOM.render(
  <React.StrictMode>
    <AuthComponent>
      <App />
    </AuthComponent>
  </React.StrictMode>,
  document.getElementById('root')
);

子コンポーネントからのアクセス方法はとっても簡単です。先ほど作成した親コンポーネントからコンテキストを参照するだけです。下記のサンプルだとuserIdとsetUserIdを参照してますね。

Home.tsx

import React, { useContext } from 'react';
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';
import {AuthContext} from '../components/auth/AuthComponent';

const Home = () => {
  const { userId, setUserId} = useContext(AuthContext);
  return (
    <ResponsiveDrawer>
      <div>
        <p>home page.</p>
        <p>user is {userId}</p>
        <button onClick={() => {setUserId("new " + userId)}}>
          Click me
        </button>
      </div>
    </ResponsiveDrawer>
  );
}
  
export default Home;

早速うごかしてみましょう！

React useContextのうごき

今回、homeとportraitの２つの子コンポーネントを用意しました。コンポーネントを遷移してもそれぞれ共通の変数を参照できていることが確認できると思います。

React useContextの使いどころ

最後にuseContextの使いどころですが、なんと言っても認証関係です。ユーザーが誰なのか？セッションは有効なのか？などなど、認証まわりの情報をコンテキストに保持しておくことで、UXに優れたWebアプリケーションを構築できます。また、画面遷移の履歴やテキストボックスの内容などを保存しておくことで、ユーザーのストレスを軽減することができるかもしれません。いずれにせよ、useContextはより良いReactアプリケーションを構築する上で必須の機能だと言えます。