Closed8

Reactの状態管理についてのメモ

ピン留めされたアイテム

それぞれの用語を軽くまとめる

Server Data Cache (SWR)

「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない?」

この『管理する必要のあるGlobal State』を小さくするために使われるのがSWR。
自分はまだ軽くしか使ったことがないのであんまり恩恵がわからないが、今後使うことは必ず来ると思う。

Global State (Recoil or Valtio)

Global Stateから1の手法によってサーバーデータのキャッシュを取り除いたあとにも、クライアントに必要ないくつかのGlobal Stateが残ります。
今のプロジェクトでは、「ページをまたいで保持し続ける必要のあるState」をGlobal Stateとして定義しています。
例えば認証情報や、ページをまたいで表示する必要のあるToast、継続してユーザーに知らせ続ける必要のあるバックグラウンド処理の進行状況などです。

Global Stateが使われる身近な例で良さそうなのはTwitterかなと。
認証情報を保持したまま色々なページを行ったり来たりするので(もしかしたら違うかも)
ライブラリでRecoil or Valtioとしているのは、よしこさんは記事内でRecoilを推していますが、別の方がValtioを推していたためです。
自分がまだ触っていなくてなんとも言えないため、後で両方とも触ってみたいと思います。

Local State (useState)

ページをまたいで保持する必要のないStateは単純に各Component内でuseStateを使って管理していま
す。

今の自分はServer Data CacheもGlobal Stateも使ったことがないので基本全部Local State (useState)で事足りてた。
けど今考えるとGlobal Stateとか知らなかっただけで使う場面あったなーと思ってます。

状態管理とは
『では、どこに・どうやって状態を持つのか?』 [1]
『データを作成/更新した後、更新せずにページを更新する方法』 [2]
というテーマのこと

RecoilとValtioは『AtomごとにState』
ReduxとZustandは『全体で一つのState』

使ったことないからわからないけど違いがあるっぽい??

このスクラップは2022/01/15にクローズされました
ログインするとコメントできます