React/Next でマウント時にatomWithStorageの値を読み込みたいのですができません。。。

Question

実現したいこと

jotai の atomWithStorage を使用しています。
以下のように useEffect の第二引数に[]を指定することでマウント時に一度だけ atomWithStorage の値を読み込んで処理を行いたいです。
しかしこれだと storedValue に値があっても undefined となってしまう様です。第二引数に storedValue を追加すれば実行されるため、タイミング的な問題でしょうか？ jotai の atom に限らず useRouter の route だったりもそのような現象があったと思います。
ただ第二引数に追加する、だと他のタイミンングで storedValue が更新された場合にも実行されてしまいます。

const [storedValue, setStoredValue] = useAtom(atom);

  useEffect(() => {
    if (storedValue) {
      //do something
    }
  }, []);

export const atom = atomWithStorage<StoredValue>("storedValue", initialState);

そもそも上記のような使い方をすると以下の様な warn が出てきますが、このような使い方は推奨されていないのでしょうか？
React Hook useEffect has a missing dependency: 'storedValue'. Either include it or remove the dependency array.
だとしたらマウント時にのみ storedValue を確認して処理を実行したい時、どのようにすれば良いのでしょか？ご教示いただけますと幸いです。

Answer 1

「マウント時に読み込むだけ」であれば、むしろステート→useEffectと連鎖させることで遠回りになってしまっている気がします。普通に useEffect の中に読み込み処理を直に書いたほうが良いと思います。

atomWithStorage は、結局中で JSON への変換と as 型 での型チェック回避を行っているだけなので、それを自分で書くだけで OK なはずです。

（ちゃんとチェックしたいなら、Zod とか Valibot みたいなスキーマライブラリを使うと良いかもしれません！）

const [value, setValue] = useState<StoredValue | undefined>(undefined);
useEffect(() => {
  const raw = localStorage.getItem("storedValue");
  if(raw == null) return;

  const jsonData = JSON.parse(raw)  as StoredValue; 
  setValue(jsonData)
], []);

---

そもそも上記のような使い方をすると以下の様な warn が出てきますが、このような使い方は推奨されていないのでしょうか？
React Hook useEffect has a missing dependency: 'storedValue'. Either include it or remove the dependency array.

余談ですが、「推奨されてない」と考えてよいと思います。

依存配列がコードと一致しない場合、バグが発生するリスクが非常に高くなります。リンタを止めることで、エフェクトが依存する値について React に「嘘」をついていることになります。

代わりに、以下にある手法を使用してください。

https://ja.react.dev/learn/removing-effect-dependencies#to-change-the-dependencies-change-the-code