jotaiという便利な状態管理のライブラリがあります。
色々機能がありますが、ローカルストレージに値を永続化できる atomWithStorage という関数があります。useStateと同じように値の取得・設定ができるので、ブラウザローカルで永続化したい時に便利です。
jotai使う前は react-use の useLocalStorage を使ったりしてたので、atomWithStorage も同じ感覚で使えると思ってました。
使い始めてからしばらく経って、レンダリングの動作に違和感を覚えました。初回レンダリングが何か違う。
atomWithStorage の初期値がおかしい?
ローカルストレージに保存された値が読み込まれてない?
react-use の useLocalStorage では、ローカルストレージに値が保存してあれば、そちらが読み込まれて初期値となるのですが、 atomWithStorage では関数で指定した初期値を使ってまずレンダリングされ、その後ローカルストレージからロードされた値でレンダリングされてました。
useLocalStorage の動作の方が望ましいので、これは困りました。
ドキュメントを参照してみると、getOnInitというフラグで制御できるとあります。
options (optional): an object with the following properties:
getOnInit (optional, by default false): A boolean value indicating whether to get item from storage on initialization. Note that in an SPA with getOnInit either not set or false you will always get the initial value instead of the stored value on initialization. If the stored value is preferred set getOnInit to true.
翻訳
オプション（オプショナル）：以下のプロパティを持つオブジェクト：
getOnInit（オプショナル、デフォルト値はfalse）：初期化時にストレージからアイテムを取得するかどうかを示す真偽値。getOnInitが設定されていないかfalseの場合、初期化時には常に初期値が取得され、ストレージに保存された値は取得されないことに注意してください。ストレージに保存された値を優先する場合は、getOnInitをtrueに設定してください。
なるほど。ということで、getOnInit: true にしておくと、useLocalStorageと同じく、初期値をローカルストレージからロードする挙動になります。getOnInit: true の動作の方がしっくりくるので、忘れないようにしたいです。
同様の話が GitHub issue でありました。