React – contextについて軽くお話

目次

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

Context

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

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

Back to Top