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

by Yudai Jinno

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© 2024 Classmethod, Inc. 自己紹介 3 簡単な自己紹介をさせていただきます。本日はどうかよろしくお願いいたします。名前神野雄大（Jinno Yudai）所属 classmethod株式会社クラウド事業本部コンサルティング部ソリューションアーキテクト資格 ● AWS Certiﬁcation All Cert ● Azure Solutions Architect Expert ● Google Cloud All Cert 得意領域 ● アプリケーション全体の設計・開発 ● IoT 好きなスーパーはラ・ムー！！！ブログはこのアイコンで書いています！

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 2024 Classmethod, Inc. 状態管理：useState 6 Reactの基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateを使用します。 useStateのイメージ ● コンポーネントBとCは、それぞれ独自のState を持つ ● 各コンポーネントの状態は互いに独立している ● コンポーネント内で完結する状態管理が可能

Slide 7

Slide 7 text

© 2024 Classmethod, Inc. 状態管理：useState 親子間でのState連携 7 useStateで親から小コンポーネントへ状態を伝播する場合、下記のようにpropsを介して行います。 useStateのバケツリレーイメージ ● コンポーネントAで定義されたStateが、複数の子コンポーネントで必要とされている ● コンポーネントEとGが実際にStateを使用（黒色で表示） ● 中間のコンポーネント（B、C、D）は単なる経由点として機能バケツリレーが発生

Slide 8

Slide 8 text

© 2024 Classmethod, Inc. 状態管理：useState + バケツリレーの課題 8 useState + バケツリレーはパフォーマンスが悪くなる可能性があります。仮にMemo化したとしても仲介となっているコンポーネントの再レンダリングも発生する可能性があり、多くのコンポーネントの再レンダリングを意識することになるからです。 useStateのバケツリレーによる再レンダリングイメージ ● 実際にStateを必要としないコンポーネントB、 D、Fも含まれる ● Memo化による最適化を行っても、propsの受け渡しは依然として必要 ● アプリケーションの規模が大きくなるほど、この問題の影響も大きくなる

Slide 9

Slide 9 text

© 2024 Classmethod, Inc. 状態管理：useState + バケツリレーの課題解消に向けて 9 useState + バケツリレーの課題に対して、いくつかの解決策があります。アプリケーションの規模や要件に応じて、適切な状態管理ソリューションを選択することが重要ですが、標準で備わっているReact Contextが採用されるケースが多いように感じます。 useState + バケツリレーの課題解消案 React Context 状態管理ライブラリ設計の見直し ● Reactの標準機能 ○ 標準機能といったこともあり最初に採用される可能性が高い ● 中間コンポーネントを介さずに状態共有が可能 ● Redux, Jotai, Zustand など ● より高度な状態管理機能を提供 ● 状態を持つコンポーネントの配置を最適化 ● コンポーネント分割の見直し

Slide 10

Slide 10 text

© 2024 Classmethod, Inc. 状態管理：React Contextの利用イメージ 10 React Contextは、propsのバケツリレーを解消するためのReactの組み込み機能です。 Contextを使用することで、中間コンポーネントを介さずに、必要なコンポーネントに直接状態を提供することができます。 React Contextの利用イメージ ● Providerで状態を提供 ● 必要なコンポーネント（青色）で直接Context を使用 ● 中間コンポーネントはContextの存在を意識する必要がない

Slide 11

Slide 11 text

© 2024 Classmethod, Inc. 状態管理：React Contextの採用の決め手 11 ContextはReact標準で組み込まれているため、まずは使ってみようみたいな温度感で採用されるケースが多いと思います。ただ使っていくといくつか課題も発生しうると思っていてそこを深掘りしていきます。 React Contextの採用イメージ React Context 状態管理ライブラリエンジニア採用外部ライブラリよりは標準の方が敷居低そうだし採用！！ただ、使っていくと課題があった・・・？

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© 2024 Classmethod, Inc. React Context：利用イメージ（再掲） 13 useState + バケツリレーを避ける場合、React標準で可能な選択肢として React Contextの使用が挙げられます。Contextは、props以外でコンポーネント間の伝達を可能にします。 React Contextの利用イメージ（再掲） ● Providerで状態を提供 ● 必要なコンポーネント（青色）で直接Context を使用 ● 中間コンポーネントはContextの存在を意識する必要がない

Slide 14

Slide 14 text

© 2024 Classmethod, Inc. ReactContext：Context Hell or Provider Tower 14 useContextは便利な機能ですが、安易な使用は「Context Hell」（もしくはProvider Tower）と呼ばれる問題を引き起こす可能性があります。複数のContextが入り組むことで依存関係が複雑化し、コードの保守性が著しく低下するケースがあります。 Context Hellのイメージ ● Providerの過度な入れ子構造 ● コードの可読性が低下 ● パフォーマンスへの影響 ● 状態管理の責務が不明確

Slide 15

Slide 15 text

© 2024 Classmethod, Inc. ReactContext：肥大化するValue 15 Contextのvalueに多くの状態や更新関数を含めすぎると、コンポーネントの再レンダリングが不必要に発生し、パフォーマンスに影響を与える可能性があります。また多くの Valueを提供すると可読性や責任分解点も不明瞭となる可能性も秘めています。肥大化するValueのイメージ ● 不必要な再レンダリングの発生 ● 状態更新の追跡が困難 ● コンポーネントの依存関係が不明確

Slide 16

Slide 16 text

© 2024 Classmethod, Inc. ReactContext：再レンダリング 16 Contextの値が変更されると、そのContextを使用している全てのコンポーネントが再レンダリングされます。適切なメモ化や状態分割を行わないと、不要な再レンダリングが発生し、パフォーマンスが低下する可能性があります。 Contextの再レンダリングイメージ ● 不必要なコンポーネントの再レンダリング ● パフォーマンスのボトルネックを招く可能性がある

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 2024 Classmethod, Inc. 状態管理の設計：対応方針 19 Contextを使用する際の課題に対して、アプリケーションの設計面から解決策を検討します。グローバルな状態管理の見直しと、適切なライブラリの選択が重要なポイントとなります。 Contextへの課題対応方法検討ライブラリの使用設計の見直し ● 外部データソースのクエリ結果保持にはSWR/Tanstack Query の使用を検討する ● 上記以外の全体の状態管理はJotaiなどの外部ライブラリの使用を検討する ● グローバルで保持するStateかどうか再検討する ● Providerのスコープを検討する

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© 2024 Classmethod, Inc. 状態管理の設計：React Contextの役割を外部ライブラリに代替する 21 状態管理の用途に応じて適切なライブラリを選択することで、Contextの役割を整理し、より効率的な実装を実現できます。外部データ取得とアプリケーション全体の状態管理、それぞれに特化したライブラリの使用を検討します。機能分割のイメージ React Context SWR/ Tanstack Query Jotai,Zustandなどデータフェッチ全体の状態管理

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© 2024 Classmethod, Inc. 状態管理の設計：Jotaiを活用する 24 Jotaiを使用することで、Atomベースの軽量な状態管理を実現できます。必要なコンポーネントで直接Atomを使用することで、Contextのような余分なラッパーが不要になり、より柔軟な状態管理が可能になります。（Jotaiが正解といったわけではなくあくまで案の1つです）イメージ ● Atomごとに独立した状態管理 ● 必要な箇所でのみ再レンダリング ● Providerのネストが不要

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© 2024 Classmethod, Inc. まとめ 27 まとめ React Contextを使用している場合は下記まとめの通り検討することでアーキテクチャの見直しを実現できます。まとめ ● 全体で状態管理すべきStateか再検討する（無闇にグローバルのState としていないか） ● 状態管理が必要なStateに関しては、Providerのスコープや保持する箇所を意識する（役割を意識せず全て1つのProviderとしていないか？） ● SWRやJotaiなど外部ライブラリに代替して、シンプルな設計にできないか検討する（必ずしも何か外部ライブラリを使うことが正解といったわけでもないです）