React – contextについて軽くお話

2021.5.31Writer: takushiComment: 0

社内のReactプロジェクトでは、
全体に渡っての状態管理はReduxにだいたい集約していることが多いです。
もちろん便利なのですが、
どんどんファットになっていたり、reducerなどの設計を統一したりと結構やることも多いので、たまに考えものです。
ということで、新しい機能からはhooksとcontextを利用することにしました。

Context

Contextを使用すると、Providerでネストする全てのコンポーネントでその値が使用できるようになります。
つまりグローバルな値を複数のコンポーネントで共有することができます。
以下のように使います
function componentの場合は、useContextが使用できます。
App componentでUserContextを作成し子コンポーネント（Button）で宣言されたvalueを使用します。

import React, { createContext, useContext } from "react";

  const UserContext = createContext(); //初期値を設定したい場合は括弧の中に入れます。
  const App = () => {

    const isLoggedIn = true; //便宜上固定値ですが、本来はAPIなどでログイン状態を取得する想定です。

    return (
      <UserContext.Provider value={isLoggedIn}>
        <Button />
      </UserContext.Provider>
    );
  }

  const Button = () => {
    const isLoggedIn = useContext(UserContext);
    return (
      <button>
        {isLoggedIn ? ログアウト : ログイン}
      </button>
    );
  }

import React, { createContext, useContext } from "react";

const UserContext = createContext(); //初期値を設定したい場合は括弧の中に入れます。

const App = () => {

const isLoggedIn = true; //便宜上固定値ですが、本来はAPIなどでログイン状態を取得する想定です。

return (

<UserContext.Provider value={isLoggedIn}>

</UserContext.Provider>

);

}

const Button = () => {

const isLoggedIn = useContext(UserContext);

return (

{isLoggedIn ? ログアウト : ログイン}

</button>

);

}

実際には、Buttonコンポーネントはより深いネスト下に存在したりします。
また、より多くの情報を親コンポーネントから受け取る必要があることも多いです。
その際に、全てをpropsにより継承させるのは大変です。
そこでContextが活躍します。
ただし、全てをContextで使用するにも、valueの肥大化などの可能性もあるので、
個人的には、開発する小機能ごとに作成するのがいいかな、と今のところは思います。
また、クラスコンポーネントの場合は、consumer内で共有するvalueを明示的に示す必要もあるので、
あまりにも共有する値が多い場合は、気をつけながらの実装が必要そうです。
実際に、今回の開発では、アプリケーション全体で使用する可能性のあるものは、引き続きReduxを使ったりしたりしました。
アプリケーション規模や、実装するものによって柔軟にいろんな方法を選べるのもReactのいいところですね。