Add loading state for atomWithStorage

[christiearcus]

I'm having a bit of trouble using atomWithStorage. It doesn't load synchronously as the first render is the initial value before re-rendering with the value from local storage. Because of this it's a bit hard to work with, and it'd be great to have a loading state so I know when it's ready to be used as with local storage there could be a value or undefined. It's be great to not just have the initial value persist.

Could you let me know if there's a workaround for this?

[dai-shi]

I think we have a similar discussion before.
Do you need Suspense for the loading state?
Otherwise, it should be possible with custom storage.

Take a very simple example:

const storage = {
  ...localStorage,
  getItem(key) {
    return localStorage.getItem(key) ?? "EMPTY VALUE"
  },
}

const anAtom = atomWithStorage("foo", "DEFAULT VALUE", storage);

If we need JSON:

const EMPTY_DATA = { /* ... */ }
const DEFAULT_DATA = { /* ... */ }
const baseStorage = createJSONStorage();
const storage = {
  ...baseStorage,
  getItem(key) {
    return baseStorage.getItem(key, EMPTY_DATA)
  },
}

const anAtom = atomWithStorage('foo', DEFAULT_DATA, storage)

It might be worth considering adding emptyData option.

// an idea
const anAtom = atomWithStorage('foo', DEFAULT_DATA, undefined, { emptyData: EMPTY_DATA })

[tancop]

Call it with { getOnInit: true } as the fourth parameter like this:

const fooAtom = atomWithStorage('foo', 'bar', localStorage, { getOnInit: true });

This will load the value from storage when the atom gets initialized so components never see the initial value.

[Falven]

This doesn't work with hydration. Op's question is still relevant. It would be great if the atom simply returned, for example:

'use client';

import { atomWithStorage, createJSONStorage } from 'jotai/utils';

const storage = createJSONStorage(() => sessionStorage);

export const myAtom = atomWithStorage('myAtom', null, { ...storage });

const [value, setValue, valueIsLoading] = useAtom(myAtom);

if (valueIsLoading) {
    return <span>Value is Loading</span>
}

// value can be null (e.g. nothing has been set by the user yet, but we have already loaded from storage.)
return <span>Value loaded: {value}</span>

rather than forcing the user to introduce some new abstract value of "empty" as @dai-shi mentioned as well. I think this is the discussion you were referencing

Here's the example with an abstract value of "empty" where undefined means not yet loaded and null means not set.

'use client';

import { atomWithStorage, createJSONStorage } from 'jotai/utils';

const baseStorage = createJSONStorage<MyType | null | undefined>(() => sessionStorage);

const storage = {
  ...baseStorage,
  // Get the item in storage or "null" when one is not set.
  getItem: (key: string) => baseStorage.getItem(key, null)
};

// Return the value in storage or "undefined" while it's not available.
export const myAtom = atomWithStorage<MyType | null | undefined>('myAtom', undefined, storage);

const [value, setValue] = useAtom(myAtom);

if (value === undefined) {
    return <span>Value is Loading</span>
}

// value can be null (e.g. nothing has been set by the user yet, but we have already loaded from storage.)
return <span>Value loaded: {value}</span>

Specifically, this solves for things like setting some default value that isn't available until render to the atom if none is set in storage.