Reactの状態管理についてのメモ
ユウト- Server Data Cache (SWR)
- Global State (Recoil or Valtio)
- Local State (useState)
ユウトそれぞれの用語を軽くまとめる
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とか知らなかっただけで使う場面あったなーと思ってます。
ユウトそもそも状態管理とは？から学ぶ必要がある気がした。
ユウト海外の記事で若干日本語変化もしれませんが、状態管理についていまいち理解できていない人にはいい記事かもしれない
ユウトRecoilとValtioは『AtomごとにState』
ReduxとZustandは『全体で一つのState』
使ったことないからわからないけど違いがあるっぽい？？
ユウトValtioをさらっとですが触りました。