React Contextは、props を介して明示的に情報を渡すことなく、コンポーネント（階層の深さに関係なく）に情報を提供できるAPIです。
以前、グローバルでデータ共有する記事を書いたが、Next.js で多くのコードを書いていくうちに、間違ってたな。と考えるようになった。
React Context とは
通常、親コンポーネントから子コンポーネントへの情報はpropsを介して渡されます。そこで、Context を使うと、propsを介することなく下位コンポーネントへ状態を共有することができます。奥底にある下位コンポーネントへpropsの受け渡しは冗長で不便なことが多いですし、なにより、状態を全く使用しないコンポーネントを経由することもあり、その点でContextは便利で体験が良いです。
ただし、Context を使ったグローバル状態が必ずも適切な選択肢とは限りません。
React Context を使用する際の問題点
Contextを使用しているコンポーネントや関連するReactツリーは、コンテキストによって提供される状態が変わると、常に再レンダリングされます。コンポーネントが実際に変更された状態部分を使っているかどうかは関係ありません。そのため、余計なレンダリングが発生しうる、ということです。
そのため、巨大な状態をContextで提供するのは望ましくありません。持つべきデータの再検討、hookなどで代替できないかなど考慮した方が良いです。
Contextが巨大であらゆる箇所で参照している場合、何が起因で再レンダリングが起きているかなど把握が困難になります。propsならどこのデータを参照しているのか、把握は簡単です。
どの場面で使用すべきか
状態が頻繁に変わることなく、また複雑でない場面で使うことが望ましいです。
テーマ、ログイン状態、言語設定あたりなどです。
Summary
適切でないContextを使ってると、大規模になるにつれボディーブローのように再レンダリングによるパフォーマンスの低下が実感できます。
どんな状態管理をしたいか、どこまでのスコープかを念頭に置いて使っていきたいところです。
