状態を localStorage と同期する

最初に思いつく方法は、ある場所でlocalStorageを読み取り、別の場所で書き込むことですが、これらは次第に食い違う可能性があります。状態の更新時に保存を忘れたり、保存された値が状態に反映されなかったりすると、バグにつながります。

Reactの状態とストレージを常に一致させる、信頼できる唯一の情報源が必要です。

すっきりした解決策は、useStateをラップして変更を自動的に保存するuseLocalStorageフックです。useStateと同じように、値とセッターを返します。

利用側は通常の状態とまったく同じように使えますが、保存機能も自動的に得られます。

localStorageの読み取りは同期処理なので、レンダーのたびに実行してはいけません。useStateに関数、つまり遅延初期化関数を渡すことで、マウント時に一度だけ読み取りを実行できます。

その関数内で保存された値をパースし、失敗した場合は指定されたデフォルト値を返します。

初期状態を引数として直接計算すると、その式は初回以降は無視されるにもかかわらず、レンダーのたびに実行されます。関数を渡すと、Reactはその関数を一度だけ呼び出します。

localStorageの読み取りでは、これによりレンダーごとにメインスレッドで同期処理を繰り返すことを避けられます。

更新を保存するには、値が変わるたびに実行され、localStorage.setItem(key, JSON.stringify(value))を呼び出すuseEffectを追加します。

依存配列に値を入れると、状態が変わるたびにストレージへ自動的に書き込まれます。

前の値を基に設定する場合は、setValue(prev => prev + 1)のような関数型の形式を使います。これにより、古い値をキャプチャして書き込んでしまう、古いクロージャの問題を避けられます。

特に、古いスナップショットをキャプチャする可能性があるイベントハンドラーやエフェクト内では重要です。

キーが存在しない場合、getItemはnullを返します。初期化関数ではこれを検出し、nullをパースしようとせずにデフォルト値へフォールバックする必要があります。

stored != null ? JSON.parse(stored) : defaultValueのようなガードを使うと、初回訪問時も適切に処理できます。

TypeScriptでは、フックをジェネリックにします。function useLocalStorage<T>(key: string, initial: T)のように記述すると、値の型が保持され、利用側で完全な型安全性を得られます。

返されるタプルは[T, Dispatch<SetStateAction<T>>]として型付けされ、useStateと一致します。

時間が経つとデータの形は変化し、古い保存値が新しいコードを壊す可能性があります。データとともにバージョンキーも保存し、古い形式を検出できるようにします。

たとえば{ version: 2, data }を保存し、読み取り時にバージョンを比較します。

保存されたバージョンが現在のものと一致しない場合は、その古い値をそのまま信頼せず、破棄するか移行します。最も単純な方法は、古いエントリを削除してデフォルト値にフォールバックすることです。

これにより、アプリの古いリリースが書き込んだデータによるクラッシュを防げます。

完全なuseLocalStorageは、安全に読み取りとパースを行う遅延初期化関数、関数型更新に対応したセッター、そしてバージョン管理付きで書き込むuseEffectを組み合わせたものです。

その結果、再読み込み後も状態を保持できる、useStateのドロップイン置換になります。

状態の初期化について理解度を確認しましょう。

遅延初期化関数を使ったuseLocalStorageフックの構築、useEffectによる変更の保存、古いクロージャを避ける関数型更新、null値の処理を学びました。

さらに、古いデータを安全に削除するためのTypeScriptのジェネリックとバージョン管理についても学びました。