useContextの使い方をおさらいする
ゆーせいこれをみてくよ
ゆーせいまずはContextとは何かを知る
ゆーせいコンテクスト (Context) を使用することで、親コンポーネントから props を明示的に渡さずとも、それ以下のツリー内の任意のコンポーネントが情報を受け取れるようにできます。
コンテクストはpropsのバケツリレーやユーザー情報などの共通の情報に対するアプローチの一つであるわけだ
ゆーせいコンテクストの実現には3ステップ必要
1.コンテクストを作成する
2. データを必要とするコンポーネントがそのコンテクストを使用(use)する。
3. データを指定するコンポーネントがそのこんんテクストを提供(provide)する
ゆーせい重要そうなセクションを見つけた
コンテクストを使う前に
ゆーせいコンテクストはとても魅力的です！ しかし、これはコンテクストは使いすぎにつながりやすいということでもあります。いくつかの props を数レベルの深さにわたって受け渡す必要があるというだけでは、その情報をコンテクストに入れるべきとはいえません。
うんうん。わかる。
わかるけど、そもそもコンテクストを多用してはいけないのはなんでなんだ？
ゆーせいパフォーマンス？コードの見やすさ？
一旦調べてみる
ゆーせい
ネストが深くない値の受け渡しに関してはメリットよりデメリットが大きくなります。
なぜなら再利用性が下がるからです。
子コンポーネント側では、useContextという hooks を用い、配布された値や関数を参照しますが、
これは親が Provider に囲まれているという前提のコードになってしまいます。
つまり子が親に依存し、再利用性が失われる訳です。
まさに子が親のContextを知ってしまうわけですね。
なるほど！必要以上にコンテクストを使うとごちゃごちゃの依存関係だらけで再利用性がめちゃ下がりになってしまうわけだ
ゆーせいほんじゃあこいつに戻るよ
ゆーせいコンテクストを使う前に他の手段を考えるべきであるというのは理解した。
ではどんな方法があるのか？
ゆーせい代替案
- 普通にpropsで渡す
コンポーネントのpropsをわかりやすい命名にしておけば、多少バケツリレーをしてもデータの流れがわかりやすくなり可読性が上がる - コンポーネントを抽出してchildrenをJSXとして渡す
<Layout posts={posts} />のようなデータを必要としていない中間に挟まったコンポーネントに値を渡すのではなく、<Layout><Posts posts={posts} /></Layout>のようにすることでデータを指定するコンポーネントとそれを必要とするコンポーネントの間のレイヤ数が減らすことができる