https://zenn.dev/yuta_ura/articles/react-context-api

みなさん、 React の Context は正しく使えていますか？この記事ではパフォーマンスの観点で Context を少しでも正しく使うための方法や理由などを書いていこうと思います。

なお、この記事の内容が最も正しいと主張するつもりではありません。ぜひ PR や コメント でよりより使い方を共有してください！

想定する読者と記事の範囲

一番この記事を読んでいただきたいのはこういった方々です

• Context についてなんとなくしか分かっていない
• とりあえず redux や recoil 等を使えば良いと思っている

しばしば recoil と Context を比較するといった趣旨の記事があったりしますが、 Context について正しく使えていないが故に、適切に比較できないものがあったりします。僕自身は Context よりも recoil を使うことが多いのですが、思考停止で recoil を使うのでは無く、なぜ recoil が嬉しいのかなどを正しく理解することで、より React を好きになってもらえるように解説したいと思いました。

この記事の範囲は以下の通りです

• Context の正しい使い方
• recoil との正しい比較方法

Context についてより深く知りたいと思っている方にはぜひ読んでいただきたいです。

Context のアンチパターン

Context の正しい使い方を説明するために、アンチパターンについて説明したいと思います。Context を紹介している記事などでよくみられるアンチパターンは主に以下の 2 通りがあります。

1. 値本体と値を入れる関数を 1 の Context に入れている
2. Provider の中に子コンポーネントを書いている

これらについて、具体的な例を挙げた上でなぜアンチパターンなのか解説していきます。

アンチパターン 1. 値本体と値を入れる関数を 1 の Context に入れている

まずはアンチパターンの具体的な例を示したいと思います。