Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるかという記事がとても素晴らしいので、Reactを使っている開発者はみんな読むとよいと思います。
この記事は、Reactの状態管理(state管理)を中心に、最近のReact、Reactを取り巻く世界を解説しています。
エンジニアHubより
この記事の目次
- 広がるReduxの採用
- Hooksの登場
- コンポーネントツリーから独立した状態管理
- Concurrent Featuresによる新しいユーザー体験
- 状態とキャッシュ
- GraphQLによる宣言的なデータ管理
- Query系ライブラリの台頭
- フロントエンドとサーバーの結合
- Server Componentsという発明
- まとめ~フロントエンドにおける状態管理~
この記事への雑感
この記事の雑な感想を書きます。
広がるReduxの採用
一時期Reduxは終わった的な記事が書かれましたが、ReduxもRedux Toolkitに進化し、引き続き使われているそうで安心しました。
関連するEY-Officeのブログ → Redux Toolkitのすすめ
Hooksの登場/コンポーネントツリーから独立した状態管理
ここではRecoilに付いて語っています。RecoilはReactの正式な機能ではありませんが、コンセプトが良い事とReactの開発母体であるFacebook(Meta)の実験的プロジェクトの1つということで注目をあびています。
関連するEY-Officeのブログ → React用ステート管理2020 〜Recoilを試してみました〜
Hooksの登場/Concurrent Featuresによる新しいユーザー体験
React18で導入されるConcurrent FeatureについてはReact18への予習シリーズで書いていますが、 Concurrent Modeはステート管理が難しくなる件に関しては最近まで知りませんでした。
関連するEY-Officeのブログ → React18への予習シリーズ: Concurrent Mode(並列モード)とは何なのか
状態とキャッシュ/GraphQLによる宣言的なデータ管理
GraphQLに関しては最近になって取り組んでいましたがサーバー側中心でした。クライアント側ではデータ(状態)をキャッシュする事で状態管理を代用しようという考えは興味深いです、もう少し勉強してみたいと思います。
Query系ライブラリの台頭
これは上と同じトピックですが、React18で導入されるSuspenseにより、Reactの非同期処理の基本的なアプローチになるのかも知れませんね。
関連するEY-Officeのブログ → React 18への予習シリーズ:Suspenseを復習しよう
フロントエンドとサーバーの結合/Server Componentsという発明
現在、導入が始まっているCDNの上でJavaScriptを実行するEdgeコンピューティングはとても興味深いです。またReact18に導入される予定の、サーバー上で選択的にReactコンポーネントをレンダリングするServer Componentsにも興味津々です。