ReactのContextについて考える

用途について

Containerコンポーネントの受け渡しに使う

StorybookのドキュメントではpropsまたはContextを使ってContainerコンポーネントを受け渡すことで、モックやスタブを使わずにストーリーを記述する方法が紹介されています (Container/Presentationalコンポーネント)

個人的にこのContextの使い方はとてもよいと思いました

グローバル状態の共有

code:javascript

// TODO

個人的にはこの使い方は可能であれば避けたほうがよいと思います

もしやるのであれば、読み込み専用※の状態などの共有に留めるとよいのではないかと思います

※状態が変更されない(immutableである)ことを指しています

例) アプリケーション全体で共有される読み込み専用のユーザーやテーマ, APIクライアントなどのオブジェクトなど

そもそも共有状態の使用をできる限り避けて、Contextの使用がほとんど必要ない状態が理想的ではないかと思います

個人的にはContextを乱用してグローバル状態をたくさん生み出してしまうよりは、propsのバケツリレーをした方がだいぶマシだと個人的には思います (たしかにコードの記述量は減らせるものの、結合度やテスタビリティ, 再利用性などは大きく低下してしまうと思います)

もし共有状態の変更が必要なのであれば、ReduxやJotaiなどのより適した方法があるためそちらを使用した方がよいと思います

あとで書く: グローバルの共有状態をContextで共有することのリスクについて