atomWithStorage does not persist the initial value

[pabo]

Using atomWithStorage, the value is not written to storage until the atom's value is changed. This is unintuitive to me. It means that if the value never changed, it will not persist.

I have a word game where the current date is used as a RNG seed to initialize the game state.

const words = [ 'list', 'of', 'words' ]; 
const dailySeedAtom = atomWithStorage("dailySeed", getCurrentDateString())
const todaysWord = atom(get => chooseWord(words, get(dailySeedAtom)));
const guessedWordsAtom = atomWithStorage([]);

The game state will persist in local storage so that the game state is preserved across reloads. The game state will be reset whenever the dailySeed changes (if a user leaves the page open across midnight)

setInterval(() => {
  if (store.get(dailySeedAtom) !== getCurrentDateString()) {
    store.set(dailySeedAtom, getCurrentDateString());
  }
}, 60000);

store.sub(dailySeedAtom, () => {
    store.set(guessedWordsAtom, []);
})

However, if a user visits and plays the game (leaving before midnight), and then visits another day, I want to detect that their persisted game state is no longer valid and should be reset. But the dailySeed value will not have persisted to local storage since it did not change in their first visit.

I can solve this outside of jotai by handling the localStorage code myself. But I wanted to question whether it would be worth adding an option for atomWithStorage to persist values immediately?

[tariqule]

@dai-shi i can create a pr for this fix if you're cool with it

[dai-shi]

Thanks for asking. Well, we are not very comfortable with complicating atomWithStorage (it feels to me it's already too complicated and I'd even suggest trying a simpler alternative, https://fosstodon.org/@daishi/110993179854190377 ), so if it's solvable outside, it should be done so.

[dai-shi]

I can solve this outside of jotai by handling the localStorage code myself.

That sounds good to me. I would use the different value for the initial value and the value for the unchanged state.

So, maybe:

const dailySeedAtom = atomWithStorage<string | null>("dailySeed", null)

[dai-shi]

This is unintuitive to me.

It's a kind of trade-off because the other way will be unintuitive for others.
Right now, if we "reset" the atom value, we remove it from the storage. So, our design is that we never store the initial value to the storage.

[pabo]

Understand about needing to make tradeoffs, but I don't quite see the opposite use case yet.

What do you mean by resetting the value? I thought this was just about whether to persist the initial value to storage?

[dai-shi]

We can RESET the value of the atom with atomWithStorage, like atomWithReset. With RESET we remove the value from the store (in memory), so it's consistent to remove it from the storage. And, the behavior is consistent with not storing the initial value.

We could say that the initial value is the value used if the item doesn't exist in the storage.

[Annie-Huang]

Yes, I have the same problem. At the moment, I got a empty local storage, and i have this:

const quoteIdAtom = atomWithStorage('quoteid', '0');
const [quoteId, setQuoteId] = useAtom(quoteIdAtom);

In my template, i got:

        <button  onClick={() => setQuoteId('123')}>Set QuoteId to 123</button>
        <button onClick={() => setQuoteId(RESET)}>Reset back to 0</button>

And if I click 1st button and the the 2nd button, localstorage key of 'quoteId' will set to undefined. But quoteId will set to 'Symbol(RESET)'.
What i really want is a function that can set local storage key to unefined (or remove the key), while setting quoteId to original value as well, which is 0;

Atm, I have to manually do it like:

<button onClick={manuallyReset}>Reset back to 0</button>
  const manuallyReset = () => {
    setQuoteId(0);
    localStorage.removeItem('quoteid');
  };

[dai-shi]

What i really want is a function that can set local storage key to unefined (or remove the key), while setting quoteId to original value as well, which is 0;

I'm expecting that what's described is the expected current behavior. Doesn't it work like that? Maybe you are using a wrong RESET symbol.

[Annie-Huang]

I use the reset from

import { RESET, useResetAtom } from 'jotai/utils';

It prints to "Symbol(RESET)' if i console.log(quoteId). And when i add

  if (quoteId === '0') {
    console.log('quoteId is 0');
  }

It does not print. I need to use it to do comparision when the next micro frontend app launch. Because as long as it doesn't equsals to the original value (e.g. '0'), the app will make backend call to retrieve info from the quote. I don't really want to compare quoteId === Symbol(RESET) | '0'

I also tried with

  const [quoteId, setQuoteId] = useAtom(quoteIdAtom);
  const resetQuoteId = useResetAtom(quoteIdAtom);

Template:
<div>QuoteId: {quoteId}</div>
        <button  onClick={() => setQuoteId('123')}>Set QuoteId to 123</button>
        <button onClick={resetQuoteId}>resetQuoteId</button>

When I click the 2nd button, it will clear local storage, but quoteId on the template will not show '0' until I fresh the page.

[dai-shi]

https://stackblitz.com/edit/jotai-starter-rvvouq?file=src%2FApp.tsx
It looks working as expected to me.

[Annie-Huang]

Hi @dai-shi thanks for your prompt reply. Your code works even without the . Mine one doesn't work, I think it is something to do with the webpack module federation micro frontend setup. I notice yours will clear the local storage as well whereas mine set local storage to 'quoteId" : undefined. I will use the work around for now (setQuoteId(0); localStorage.removeItem('quoteid');)

Thanks again for your assistant today.