Hydrating from Local Storage on First Render

[cveering]

Hi,

Looking at the console output for the following example code you can see that the darkModeAtom that was initialized with atomWithStorage prints to the console twice on refresh. The first time is the default value. The second time is the recalled (hydrated) value pulled from local storage. That is fine for the darkmode use case, but it won't work for authentication checking.
https://codesandbox.io/s/jotai-persistence-vuwi7?from-embed=&file=/src/app.js

I want to store a userAtom in local storage and check for the existence of the user to determine if access to private routes should be granted.

store.js

const userAtom = atomWithStorage('')

PrivateRoutesWrapper.jsx

const user = useAtom(userAtom)
if (user !== '') { 
    Redirect to login
} else {
    Display private content
}

The problem is that on first render, user is always an empty string so it always redirects to login.

Redux with Redux Persist can handle this, but I like Jotai much better. I could always pop the value directly out of local storage, but then all of the other atomic code that relies on user still falls down and things go sideways quickly. Any suggestions for workarounds?

Thanks!

[cveering]

So I was able to resolve this by creating a simple atom that grabs the user value directly out of local storage without negatively impacting other functionality. But it would be great if atoms hydrated on first render... I'm only a day into Jotai and am already a big fan.

[dai-shi]

The behavior is changed in v2 due to SSR complaining on hydration. Seems like React recommends two renders for SSR.

We could create another util for reading localStorage in sync, but it's rather trivial to create a such atom. And, you have more control explicitly.

jotai/docs/guides/persistence.mdx

Lines 14 to 22 in dae4418

	const strAtom = atom(localStorage.getItem('myKey') ?? 'foo')
	const strAtomWithPersistence = atom(
	(get) => get(strAtom),
	(get, set, newStr) => {
	set(strAtom, newStr)
	localStorage.setItem('myKey', newStr)
	}
	)

For AsyncStorage, hm, yeah, it's not that easy.

[dai-shi]

How does your code look like?

[mahdiElmi]

I get the same "ReferenceError: localStorage is not defined" error like chris.

import { atomWithStorage } from "jotai/utils";

export const cartAtom = atomWithStorage<LocalShoppingCartItems>(
  "shoppingCart",
  localStorage.getItem("shoppingCart") !== null
    ? JSON.parse(localStorage.getItem("shoppingCart")!)
    : {},
);

I'm using next js app directory. if I add "use client" I get this error: The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

if I do a typeof window !== "undefined" check before accessing local storage I get a hydration error.
I also tried to pass { getOnInit: true } but that also causes another error.
I feel like I'm not using this as I'm supposed to 😄 any recommendations would be appreciated

[dai-shi]

I also tried to pass { getOnInit: true } but that also causes another error.

Try passing undefined for the second argument.

[mahdiElmi]

did it like so

export const cartAtom = atomWithStorage<LocalShoppingCartItems>(
  "shoppingCart",
  {},
  undefined,
  { getOnInit: true },
);

and still got hydration errors :
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "0" Client: "1"
(the text is cart items count that is pulled from local storage on client)

maybe I should mention that I'm using the atom with useHydrateAtoms in two other components to merge the shopping cart state from server and client like so:

const [items, setItems] = useAtom(cartAtom);
  useHydrateAtoms([
    [cartAtom, mergeCartItems(cartItemsFromServer, items)],
  ]);

all I want to do is to have the client version of shopping cart on local storage be merged with the server version on initial load or as soon as possible without any hydration errors.

[dai-shi]

got hydration errors

Sorry, in that case, you shouldn't specify getOnInit.

I'm not following the every details, but I guess the solution for your case is useEffect.

[tnlogy]

Thanks for an interesting library! I found it confusing when trying out atomWithStorage and atomWithHash, that the initialValue is used instead of the stored value in the first render. I wrote my own like this, and then found this thread with similar solutions.

Since my first render called the event moveend on my openlayers map, it just overwrite the stored value on every reload of the page.

function atomWithStorage(key, initialValue) {
    const _local = atom(localStorage.hasOwnProperty(key) ? localStorage[key] : initialValue);
    return atom(
        (get) => get(_local),
        (get, set, newValue) => {
            localStorage[key] = newValue;
            set(_local, newValue);
        }
    );
}

[dai-shi]

Nice finding. We have that recipe in the persistence guide too.

[lenocin]

That works for me until I do a build where I get an error ReferenceError: localStorage is not defined

[XantreDev]

import { atomWithStorage, createJSONStorage } from 'jotai/utils';
import EncryptedStorage from 'react-native-encrypted-storage';

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

/**
*

• @description Suspends before load
  */
  export const atomWithEncryptedStorage = (key: string, defaultValue: T) =>
  atomWithStorage(
  key,
  storage
  .getItem(key)
  .then((v) => (typeof v === 'symbol' ? defaultValue : v))
  .catch(() => defaultValue) as any,
  storage as any,
  );

[XantreDev]

Suspend atom before get value

[quolpr]

Nice solutions about, but I also want to have localstorage changes listen feature (so if locastorage changed in one tab, atoms in other tabs will get known):

import { atom, WritableAtom } from "jotai";
import {
  createJSONStorage,
  RESET,
  unstable_NO_STORAGE_VALUE as NO_STORAGE_VALUE,
} from "jotai/utils";

type Unsubscribe = () => void;
type SetStateActionWithReset<Value> =
  | Value
  | typeof RESET
  | ((prev: Value) => Value | typeof RESET);

export function atomWithWebStorage<Value>(
  key: string,
  initialValue: Value
): WritableAtom<Value, [SetStateActionWithReset<Value>], void> {
  const storage = createJSONStorage(() => window.localStorage);
  const valueFromStorage = storage.getItem(key);
  const baseAtom = atom<Value>(
    valueFromStorage === NO_STORAGE_VALUE ? initialValue : valueFromStorage
  );

  if (import.meta.env.MODE !== "production") {
    baseAtom.debugPrivate = true;
  }

  baseAtom.onMount = (setAtom) => {
    const value = storage.getItem(key);
    setAtom(value === NO_STORAGE_VALUE ? initialValue : value);
    let unsub: Unsubscribe | undefined;
    if (storage.subscribe) {
      unsub = storage.subscribe(key, setAtom);
    }
    return unsub;
  };

  const anAtom = atom(
    (get) => get(baseAtom),
    (get, set, update: SetStateActionWithReset<Value>) => {
      const nextValue =
        typeof update === "function"
          ? (update as (prev: Value) => Value | typeof RESET)(get(baseAtom))
          : update;
      if (nextValue === RESET) {
        set(baseAtom, initialValue);
        return storage.removeItem(key);
      }
      set(baseAtom, nextValue);
      return storage.setItem(key, nextValue);
    }
  );

  return anAtom;
}

It is basically an adoption of what jotai already offers(I copy-pasted code), but with this change:

const baseAtom = atom<Value>(
  valueFromStorage === NO_STORAGE_VALUE ? initialValue : valueFromStorage
);

[kurdin]

The above implementation did not work for me, seems like unstable_NO_STORAGE_VALUE is not available in the latest version of jotai/utils.

Here is working TS version of atomWithWebStorage with support of boolean and string as value.

Using atomWithWebStorage instead of atomWithStorage will allow you to persist atom value in the browser's localstorage and restore it current value without default value on the first render.

export function atomWithWebStorage<Value>(
	key: string,
	initialValue: Value,
	storage = localStorage
) {
	const storedValue = storage.getItem(key);
	const isString = typeof initialValue === 'string';

	const storageValue = storedValue
		? isString
			? storedValue
			: storedValue === 'true'
		: undefined;

	const baseAtom = atom(storageValue ?? initialValue);

	return atom(
		get => get(baseAtom) as Value,
		(_get, set, nextValue: Value) => {
			set(baseAtom, nextValue);
			storage.setItem(key, nextValue!.toString());
		}
	);
}

[micaiah-effiong]

@cveering this problem can be resolved by using the getOnInit option

export const userAtom = atomWithStorage('user', null, undefined, { getOnInit: true })

see https://jotai.org/docs/utilities/storage#parameters

[VitAndrGuid]

This is nice, but for SSR / NextJS this will cause a hydration mismatch

[vietvh-3042]

@VitAndrGuid I'm having the same problem for the first render. Is there any way to solve it

[VitAndrGuid]

@vietvh-3042 not really since the server cannot access local storage the first render cannot have any loaded values.

i ended up with the following monkeypatch:

My root layout is a client component and on it i load the atom values that would intefere with the first render using useAtomValue

On the root layout i have another component with the following code, it basically just waits a little until the localstorage values are loaded and displays a spinner until it does, since the children of this component is rendered after jotai has loaded, the SSR render mismatch wont happen

The problem with this approach is that on the first render of the root layout this spinner will always be shown, that sucks for UX, but if i stayed more hours on this issuei would kms.

see:
https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions