Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

TSLab【第5回 React勉強会】状態管理ライブラリ

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

当記事はTSLab・React定例会のレポート記事になります!

はじめに

私が運営しているTSLabの第5回・React勉強会の実施ログとなります。
第5回のテーマは【状態管理ライブラリ】
今回はReactおじさんに講師をして頂きました!ありがとうございます!
@react_nextjs Twitter

実施内容

今回の勉強会ではReactの状態管理ライブラリについてお話をいただきました。
ローカルステートとグローバルステートの違いだけでなく、useContextを使ったステート管理、状態管理ライブラリを使うことのメリットについても詳しくお話を頂きました。
下記ドキュメントに詳しく記載がされているので、当記事では簡単なサマリーのみ記載をさせて頂きます。
※2022年6月時点の情報となります。
https://github.com/shogo4131/react-state-management/blob/main/doc/%E7%AC%AC5%E5%9B%9E%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/doc.md

サマリー

ローカルステートとグローバルステートの違い

こちらのパートではReactのローカルステート管理ができるuseState/useReducer比較して、グローバルステート管理をした場合の特徴やメリデメをご説明頂きました。
第2回React勉強会でuseStateについてのご説明を頂いているので、気になる方は下記のページもご確認ください。
https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC2%E5%9B%9E/
ローカルステートを使う場合に発生してしまうPropsバケツリレーの例を用いて、グローバルステートを使った際にどう回避出来るかを丁寧にご説明いただきました。(通称: 三男借金リレー)

状態管理方法の違いと特徴

今回の勉強会での一番の気づきはこちらのパート。
一言に状態管理と言っても、大きく分けて2種類の(他にもあるかも?)管理方法があることを知りました!
私自身Vuex(Vue.jsの状態管理ライブラリ)しか使ったことが無かったので、一つの大きなストアで管理するのが当たり前だと思っていました!学び!
https://github.com/shogo4131/react-state-management/blob/main/doc/%E7%AC%AC5%E5%9B%9E%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/doc.md#%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%82%92%E8%A1%8C%E3%81%86%E3%81%AE%E3%81%8B

状態管理ライブラリの種類

  • Redux
  • Zustand
  • Recoil
  • Jotai

※メジャーどころを抜粋頂いているので、その他の状態管理ライブラリに興味がある方はご自身で調べてみてください。

さいごに

React勉強会シリーズ第5弾終了!
私自身Reduxがあまり好きではない(ちょい複雑で分かりずらい)のですが、Recoilは簡単に記述が出来るので趣味で触ってみたくなりました!
また、小規模な状態管理であればuseReducer/useContextでとどめて、規模が大きくなるようならライブラリを選定するという話も出たので、この辺りの議論も今後さらに深めていきたいですね!
以上。簡単なまとめになります!