「3種類」で管理するReactのState戦略

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく

[sakai_cyk]

いまやってるプロジェクトでの戦略とおなじだった。React QueryやSWRがでてほんとうに楽になった印象。述べられてる以外だと状態としてのURLとかもあるかな。refer: https://blog.nrwl.io/managing-state-in-angular-applications-22b75ef5625f

[carolina04]

“アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State”

[yamadar]

サーバーデータのキャッシュ、Global State、Local State

[tkmkg8m]

サーバーデータのキャッシュはSWRのキャッシュ機構に任せる。Global StateはRecoilで管理。Contextはしっくり来なかったため。Local Stateは単純に useState で。

[hasiduki]

むずーい！

[Nyoho]

recoilが使われている

[yarumato]

“アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ GlobalState LocalState”

[mayumayu_nimolove]

ちょうど復習してるとこだった！

[kvx]

まったく同じ構成で進めた案件あったけどrecoilのバグ踏んでグローバルstateもSWRを使うことにした。

[onesplat]

よさそう

[crexist]

ほぼほぼ同意

[Keisuke69]

個人的にはしっくり来る

[jay-es]

サーバーデータのキャッシュ（SWR）、グローバル（Recoil）、ローカル（useState）