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

実現したいこと

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

ts

1const [storedValue, setStoredValue] = useAtom(atom);2 3 useEffect(() => {4 if (storedValue) {5 //do something6 }7 }, []);

ts

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

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

コメントを投稿

0 コメント