Contextを使うとコンポーネント間のデータ共有をシンプルに実装できます。 Propsとの違いを軸に、Contextがいかに便利であるか調べてみました。

1. Reactでのデータ共有
Props vs Context
@yzmw1213

2. ・yzmw1213 です。
（ネット上での名前をまだ持ってないので、Gitのnameで名乗らさせて頂きます）
・エンジニア6年目で、React書いたり、GoでWeb API書いたりしてる人。
・学習中の技術: DBのインデックス構造 Btree, 二分探索とか
自己紹介

3. 個人的に、React.Contextについて理解が不足しており、
使えていない（Contextを使うべき場面なのかどうかの判断ができていない）ので
理解を深めるために調べました

4. 目次
1. reactコンポーネント間でデータを共有する方法いくつか
2. Props,Contextの比較

5. コンポーネント間でデータを共有するには？

6. Propを多用する？

7. 方法は、いくつかある
● Redux
● イベントバス
● URLパラメータにデータを設定する
● セッションストレージ
● Props

8. Redux
● アプリケーション全体での状態管理を目的に設計されている。
● アプリケーションの状態が時間経過とともに頻繁に更新される場合に使われるべき。
状態変化を可視化したい場合

9. イベントバス
● コンポーネントからのイベント発火を起こすことができる。
● 多用しすぎると、イベント名の管理などでコードが混乱しやすくなるため、注意しましょう
eventBus.emit(‘MY_EVENT’, { foo: ‘xxx’}) eventBus.on(‘MY_EVENT’, handleEvent)

10. URLパラメータに設定する
● URLパラメータにデータを設定することで、データを共有する
● データ共有するためには画面遷移が必要なため、
入力データなどリアルタイムにデータを更新したい場合には不向き。

11. セッションストレージ
● ブラウザにデータを保持する
● 同一セッションの画面やタブ間でデータを共有できる
● セキュリティ上のリスクがある。（パスワード等の機密情報など、保持すべきでない）
● Reactコンポーネントは、同じページ内に存在する場合がほとんどであり、
セッションストレージを使う必要性は高くない

12. Props
● 親コンポーネントが、自身の内包するコンポーネントに属性としてデータを渡す方法。
● どのような型のデータでも渡せる。関数を渡すことも可能
● ただし、渡されたpropsは変更することができない事に注意。
子から値を変更したい場合は、Propsにset関数を追加する必要がある。
data,
setData()

13. Propsの問題点
・コンポーネントの階層が深くなると
Propsの受け渡しが冗長になり、
不便になる。

14. ・下層にあるボタンや、ラベルを
制御するために色情報が
Propsで渡される事が
多くなっている

15. Context
Provider: contextの読み書きができる範囲
Context
value

16. Context
● コンテキストは、コンポーネントがその下のツリー全体に何らかの情報を提供することを可
能にする。
● コンテキストを使うコンポーネントは、Providerの範囲内にいる必要がある。
● Providerを配置するコンポーネントと、contextを利用するコンポーネントの間には、
どれだけ階層が合っても利用可能。
● <div>のような組み込みコンポーネントと、自作コンポーネントによらず利用可能

17. UIでContextが使われている箇所
● Redux
● react-query
コンポーネントがネストしても
clientやストアが使えるようにするため、内部でReact.Contextが使われている

18. PropsとContextの比較
Props
🙆 データの流れが一方向（親→子）で、明確である
🙆 型安全であり、コンポーネントを再利用しやすい
🙅 コンポーネントツリーが深くネストする場合、多層にデータを渡す必要がある
Context
🙆 多層にデータを渡さなくて良い
🙅 コンポーネントにContextを利用すると、再利用しにくくなる場合がある

19. Contextの利用場面
・Themeの共有 検討してみてもいいかもしれない。
・言語切り替え: （多言語対応する場合）
・ログイン情報の保持

20. Props vs Context
・単に、子の表示する情報を親が制御したい場合はPropsで良い
・コンポーネントの再利用性を高めたい場合にPropsは有用
・頻繁に変更されることの少ない、グローバルな情報を持つにはContextを検討してみたい

21. Tips.
Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)
資料作っている間に、ReduxとContextの違いが疑問になったので、調べたら出てきた。
ReduxのContributorであるMark Erikson 氏が述べている。