React Contextの状態管理について考える

Transcript

1. © 2024 Classmethod, Inc. クラスメソッドのReact事情大公開スペシャル#6 1/15（水） React Contextの状態管理について考える クラスメソッド株式会社 クラウド事業本部コンサルティング部 神野 雄大（Jinno Yudai）
2. © 2024 Classmethod, Inc. Agenda 2 1. 自己紹介・本発表の目的 2. Reactの状態管理 3. React Context 4. 状態管理の設計
3. © 2024 Classmethod, Inc. 自己紹介 3 簡単な自己紹介をさせていただきます。本日はどうかよろしくお願いいたします。 名前 神野 雄大（Jinno Yudai） 所属 classmethod株式会社 クラウド事業本部 コンサルティング部 ソリューションアーキテクト 資格 • AWS Certification All Cert • Azure Solutions Architect Expert • Google Cloud All Cert 得意領域 • アプリケーション全体の設計・開発 • IoT 好きなスーパーはラ・ムー！！！ ブログはこのアイ コンで書いていま す！
4. © 2024 Classmethod, Inc. 本発表の目的 4 本発表の対象と目標は下記の通りです。 対象 対象と目的 • React 初心者 ~ 中級者 • React Contextを使用しているが課題感を感じている 目標 • React Contextの設計を見直すきっかけとなり、よりより設計への一歩を 踏み出すきっかけとなる。
5. © 2024 Classmethod, Inc. Agenda 5 1. 自己紹介・本発表の目的 2. Reactの状態管理 3. React Context 4. 状態管理の設計
6. © 2024 Classmethod, Inc. 状態管理：useState 6 Reactの基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結する ようなステートならばuseStateを使用します。 useStateのイメージ • コンポーネントBとCは、それぞれ独自のState を持つ • 各コンポーネントの状態は互いに独立している • コンポーネント内で完結する状態管理が可能
7. © 2024 Classmethod, Inc. 状態管理：useState 親子間でのState連携 7 useStateで親から小コンポーネントへ状態を伝播する場合、下記のようにpropsを介し て行います。 useStateのバケツリレーイメージ • コンポーネントAで定義されたStateが、複数の 子コンポーネントで必要とされている • コンポーネントEとGが実際にStateを使用（黒 色で表示） • 中間のコンポーネント（B、C、D）は単なる経 由点として機能 バケツリレーが発生
8. © 2024 Classmethod, Inc. 状態管理：useState + バケツリレーの課題 8 useState + バケツリレーはパフォーマンスが悪くなる可能性があります。仮にMemo化 したとしても仲介となっているコンポーネントの再レンダリングも発生する可能性があ り、多くのコンポーネントの再レンダリングを意識することになるからです。 useStateのバケツリレーによる再レンダリングイメージ • 実際にStateを必要としないコンポーネントB、 D、Fも含まれる • Memo化による最適化を行っても、propsの受け 渡しは依然として必要 • アプリケーションの規模が大きくなるほど、こ の問題の影響も大きくなる
9. © 2024 Classmethod, Inc. 状態管理：useState + バケツリレーの課題解消に向けて 9 useState + バケツリレーの課題に対して、いくつかの解決策があります。アプリケー ションの規模や要件に応じて、適切な状態管理ソリューションを選択することが重要で すが、標準で備わっているReact Contextが採用されるケースが多いように感じます。 useState + バケツリレーの課題解消案 React Context 状態管理ライブラリ 設計の見直し • Reactの標準機能 ◦ 標準機能といったこともあり最初に採用される可能性が高い • 中間コンポーネントを介さずに状態共有が可能 • Redux, Jotai, Zustand など • より高度な状態管理機能を提供 • 状態を持つコンポーネントの配置を最適化 • コンポーネント分割の見直し
10. © 2024 Classmethod, Inc. 状態管理：React Contextの利用イメージ 10 React Contextは、propsのバケツリレーを解消するためのReactの組み込み機能です。 Contextを使用することで、中間コンポーネントを介さずに、必要なコンポーネントに 直接状態を提供することができます。 React Contextの利用イメージ • Providerで状態を提供 • 必要なコンポーネント（青色）で直接Context を使用 • 中間コンポーネントはContextの存在を意識す る必要がない
11. © 2024 Classmethod, Inc. 状態管理：React Contextの採用の決め手 11 ContextはReact標準で組み込まれているため、まずは使ってみようみたいな温度感で採 用されるケースが多いと思います。ただ使っていくといくつか課題も発生しうると思っ ていてそこを深掘りしていきます。 React Contextの採用イメージ React Context 状態管理ライブラリ エンジニア 採用 外部ライブラリよりは標準の方 が敷居低そうだし採用！！ ただ、使っていくと課題があっ た・・・？
12. © 2024 Classmethod, Inc. Agenda 12 1. 自己紹介・本発表の目的 2. Reactの状態管理 3. React Context 4. 状態管理の設計
13. © 2024 Classmethod, Inc. React Context：利用イメージ（再掲） 13 useState + バケツリレーを避ける場合、React標準で可能な選択肢として React Contextの使用が挙げられます。Contextは、props以外でコンポーネント間の伝達を可 能にします。 React Contextの利用イメージ（再掲） • Providerで状態を提供 • 必要なコンポーネント（青色）で直接Context を使用 • 中間コンポーネントはContextの存在を意識す る必要がない
14. © 2024 Classmethod, Inc. ReactContext：Context Hell or Provider Tower 14 useContextは便利な機能ですが、安易な使用は「Context Hell」（もしくはProvider Tower）と呼ばれる問題を引き起こす可能性があります。複数のContextが入り組むこ とで依存関係が複雑化し、コードの保守性が著しく低下するケースがあります。 Context Hellのイメージ • Providerの過度な入れ子構造 • コードの可読性が低下 • パフォーマンスへの影響 • 状態管理の責務が不明確
15. © 2024 Classmethod, Inc. ReactContext：肥大化するValue 15 Contextのvalueに多くの状態や更新関数を含めすぎると、コンポーネントの再レンダリ ングが不必要に発生し、パフォーマンスに影響を与える可能性があります。また多くの Valueを提供すると可読性や責任分解点も不明瞭となる可能性も秘めています。 肥大化するValueのイメージ • 不必要な再レンダリングの発生 • 状態更新の追跡が困難 • コンポーネントの依存関係が不明確
16. © 2024 Classmethod, Inc. ReactContext：再レンダリング 16 Contextの値が変更されると、そのContextを使用している全てのコンポーネントが再 レンダリングされます。適切なメモ化や状態分割を行わないと、不要な再レンダリング が発生し、パフォーマンスが低下する可能性があります。 Contextの再レンダリングイメージ • 不必要なコンポーネントの再レンダリング • パフォーマンスのボトルネックを招く可能性が ある
17. © 2024 Classmethod, Inc. ReactContext 17 今上がった問題に対してどう対応するか？？
18. © 2024 Classmethod, Inc. Agenda 18 1. 自己紹介 2. Reactの状態管理 3. React Context 4. 状態管理の設計
19. © 2024 Classmethod, Inc. 状態管理の設計：対応方針 19 Contextを使用する際の課題に対して、アプリケーションの設計面から解決策を検討 します。グローバルな状態管理の見直しと、適切なライブラリの選択が重要なポイン トとなります。 Contextへの課題対応方法検討 ライブラリの使用 設計の見直し • 外部データソースのクエリ結果保持にはSWR/Tanstack Query の使用を検討する • 上記以外の全体の状態管理はJotaiなどの外部ライブラリの使用 を検討する • グローバルで保持するStateかどうか再検討する • Providerのスコープを検討する
20. © 2024 Classmethod, Inc. 状態管理の設計：Contextの設計を再検討する 20 Contextのスコープを適切に設計することで、パフォーマンスの改善と可読性の向上 が可能となります。グローバルな状態管理が本当に必要か、より狭いスコープで実現 できないか検討します。 実装イメージ
21. © 2024 Classmethod, Inc. 状態管理の設計：React Contextの役割を外部ライブラリに代替する 21 状態管理の用途に応じて適切なライブラリを選択することで、Contextの役割を整理 し、より効率的な実装を実現できます。外部データ取得とアプリケーション全体の状 態管理、それぞれに特化したライブラリの使用を検討します。 機能分割のイメージ React Context SWR/ Tanstack Query Jotai,Zustandなど データフェッチ 全体の状態管理
22. © 2024 Classmethod, Inc. 状態管理の設計：SWRを活用する 22 SWRやTanstack Queryなどのライブラリを使用することで、外部データの状態を Contextを使わずに効率的に管理できます。以下は外部データ取得におけるSWRの実 装例です。 SWR による実装イメージ • キャッシュの自動管理 • ローディング状態の提供 • エラーハンドリング
23. © 2024 Classmethod, Inc. Appendix：SWRのグローバル設定 23 SWRの設定はSWRConfigを使用することで、アプリケーション全体で共通の設定を 適用できます。これにより、個別のuseSWRでの設定を最小限に抑えることができま す。 イメージ
24. © 2024 Classmethod, Inc. 状態管理の設計：Jotaiを活用する 24 Jotaiを使用することで、Atomベースの軽量な状態管理を実現できます。必要なコン ポーネントで直接Atomを使用することで、Contextのような余分なラッパーが不要 になり、より柔軟な状態管理が可能になります。（Jotaiが正解といったわけではな くあくまで案の1つです） イメージ • Atomごとに独立した状態管理 • 必要な箇所でのみ再レンダリング • Providerのネストが不要
25. © 2024 Classmethod, Inc. Appendix：Jotaiの実装 25 Jotaiの実装例となります。Atomを使用してシンプルな実装を実現できます。 Jotaiの実装イメージ
26. © 2024 Classmethod, Inc. Appendix：状態管理としてSWRの使用検討 26 SWRに全体の状態管理を寄せる方法もございます。fetcherにnullを指定し、再検証 を無効化することで、純粋な状態管理として活用も可能で、状態管理ライブラリの使 用を避けたい場合は有用な手になりうる可能性もあります。 状態管理としてSWRを使用する実装イメージ
27. © 2024 Classmethod, Inc. まとめ 27 まとめ React Contextを使用している場合は下記まとめの通り検討することでアーキテク チャの見直しを実現できます。 まとめ • 全体で状態管理すべきStateか再検討する（無闇にグローバルのState としていないか） • 状態管理が必要なStateに関しては、Providerのスコープや保持する箇 所を意識する（役割を意識せず全て1つのProviderとしていないか？） • SWRやJotaiなど外部ライブラリに代替して、シンプルな設計にできな いか検討する（必ずしも何か外部ライブラリを使うことが正解といった わけでもないです）
28. © 2024 Classmethod, Inc. おわりに 28 今回話した内容はいかがでしたでしょうか。React Contextの状態管理に ついて考えるのはこれといった正解はなく難しいですが、その中でも最適 解を見つけてよりより実装にしていく参考になったら幸いです！ 最後までご清聴いただきありがとうございましたー！！
29. © 2024 Classmethod, Inc.