🌊

React 初心者がゼロから作って苦労した State 管理の話

2 min read

Agenda

  • はじめに
  • 変遷の紹介
    • PageComponentによるState管理
    • ContextによるPageComponentのState管理
    • Container ComponentによるState管理
    • カスタムフックによるState管理
  • PageComponentによるState管理
  • ContextによるPageComponentのState管理
  • Container ComponentによるState管理
  • カスタムフックによるState管理
  • まとめ

はじめに

はじめまして。株式会社 Magic Momentでエンジニアをしている清水と申します。
Magic Moment にジョインするまでは、Vue.js はガリガリ使っていたものの、React は未経験でした。

そんな私がReact/Typescriptを採用し、プロダクトを開発していく中で、試行錯誤を繰り返したページ内で使用するStateの管理(以下State管理)についてご紹介致します。

変遷

  • PageComponentによるState管理
  • ContextによるState管理
  • Container ComponentによるState管理
  • カスタムフックによるState管理

PageComponentによるState管理

開発当初は、Reactに知見があるメンバーがいなかったこともあり、一番シンプルな方法として、PageComponentでState管理をしていました。

PageComponentによるState管理

突き当たった課題

  • Stateに変更がある度に、PageComponent配下にあるすべてのコンポーネントが再レンダリングされてしまい、ページの表示がもたついてしまった
  • ページコンポーネントが肥大化してしまい可読性が下がった

ContextによるState管理

PageComponentのState管理では多くの課題が有りましたが、その中でも再レンダリングの問題はユーザーの操作に直接影響してしまい、致命的な問題でした。

そこで、必要なコンポーネントのみレンダリングされる仕組みはないかと探したところ、Context(https://ja.reactjs.org/docs/context.html)という機能を使えば実現できることがわかりました。

ContextによるState管理

突き当たった課題

  • データの流れが不明瞭になり、可読性が大幅に下がった
  • 子コンポーネントがContextに依存してしまい、コンポーネントの再利用ができなくなった

Container ComponentによるState管理

ContextによるState管理の可読性の低さは、チーム開発において混乱を招くもので、代替のState管理を早期に考える必要がありました。そこで採用したのが、デザインとデータ・ロジックを分離するContainer Componentという考え方です。

ContainerComponentによるState管理

Container Componentを導入することで、デザインとデータ・ロジックが分離され、PageComponentの可読性が向上したとともに、コンポーネントの再利用性も高まりました。

突き当たった課題

  • この時のチームは少人数だったため、既存のコードにContainer Componentを導入するには多くの工数がかかり、リソースと見合わなかった。

カスタムフックによるState管理

Container ComponentによるState管理で多くの工数がかかるのは、TSXに変更が加わるためではないかと考え、TSXに影響なくデザインとデータ・ロジックを分離する方法としてカスタムフック(https://ja.reactjs.org/docs/hooks-custom.html)にたどり着きました。

CustomHookによるState管理

カスタムフックにすることで、TSXに変更を加えず、データ・ロジックの分離ができ、ロジックの再利用も可能になりました。

まとめ

プロダクトの規模や状態によって、最適なページのState管理の方法は違いますので、一概にカスタムフックがベストな方法だとは言えませんが、Magic Moment では、State管理にカスタムフックを使うことが一番適していました。

State管理がうまくいかないという方は、カスタムフックを導入することで解決するかもしれません。

Magic Momentでは、フロントのアーキテクチャを一緒に考えて開発してくださる方を募集しています。

Discussion

ログインするとコメントできます