状態をどこに置くか — URL に無いものは、共有できない

What — 置き場所は4つある

同じ「状態」でも、置き場所によってできることが変わります。

const [filter, setFilter] = useState({})

生存期間: ページを離れるまで
共有:     できない
復元:     できない

URL の状態

クエリ文字列やパスに埋め込まれた状態。共有とブックマークができる。

サーバー状態

サーバーが持つデータを、クライアントが写し取っているもの。キャッシュの一種。

クライアント状態

画面の都合だけで存在する状態。開閉、選択、入力途中。

ソース・オブ・トゥルース

その値の正が、どこにあるか。複数の場所に写しがあるとずれる。

「サーバーのデータ」と「画面の状態」は別物

混同されやすい2つです。

サーバーのデータを useState に入れて持つと、それはキャッシュです。キャッシュには「いつ古くなるか」「いつ取り直すか」という問題が付いてきます（network/caching と同じ構造）。

画面の状態と同じ扱いにすると、古いデータを表示し続けます。

Why — 置き場所が、できることを決める

URL に無いものは、存在しないのと同じ

Web の基本的な性質です。URL は「その画面を指すもの」であり、URL に含まれない状態は指せません。

冒頭の事故で失われたのは、次の全部です。

• 共有（同僚に送る）
• ブックマーク
• リロード
• 戻る / 進む
• 新しいタブで開く

これらは Web が最初から持っている機能です。状態を URL から外すと、それを自分で捨てることになります。

そして利用者は、それを不具合として報告しません。「このサイトはそういうものだ」と思うだけです。冒頭で誰も報告しなかったのは、そのためです。

「何を期待するか」から置き場所を決める

順序が重要です。先に技術を選ばない。

同じ値を2箇所に持つと、必ずずれる

URL にも useState にも同じ絞り込み条件を持つと、どちらが正かという問題が生まれます。

• URL を直接編集された
• 「戻る」で URL だけ変わった
• 別の画面からリンクで来た

正を1つに決めます。 URL に置くなら、URL を読んで描画する。useState は持たない。

演習 — まず自分で判断する