onRehydrateStorage is invoked before storeage.getItem

[Jeffrey Young]

Summary

These are the logs for the below store

onRehydrateStorage {count: 0, _hasHydrated: false, increment: ƒ, setHasHydrated: ƒ}
storage.setItem food-storage {"state":{"_hasHydrated":true},"version":0}
storage.getItem food-storage
storage.getItem value {"state":{"_hasHydrated":true},"version":0}
storage.setItem food-storage {"state":{"count":0,"_hasHydrated":true},"version":0}

Because onRehydrateStorage is called before storage.getItem, the store is always reset with default data.

For the following store:

export const useCount = create()(
  persist(
    (set, get) => ({
      count: 0,
      _hasHydrated: false,
      increment: () => {
        set({ count: get().count + 1 });
      },
      setHasHydrated: (value: boolean) => {
        set({ _hasHydrated: value });
      },
    }),
    {
      name: "food-storage", // name of item in the storage (must be unique)
      storage: createJSONStorage(() => ({
        getItem: async (name) => {
          console.log("storage.getItem", name);
          const value = localStorage.getItem(name);
          console.log("storage.getItem value", value);
          return value;
        },
        removeItem: (name) => localStorage.getItem(name),
        setItem: (name: string, value) => {
          console.log("storage.setItem", name, value);
          return localStorage.setItem(name, value);
        },
      })),
      // (optional) by default the 'localStorage' is used
      onRehydrateStorage: (data: any) => {
        console.log("onRehydrateStorage", data);
        data.setHasHydrated(true);
      },
    }
  )
);

Link to reproduction

https://codesandbox.io/p/sandbox/zustand-repro-pyys3x - see App.tsx and look at console logs

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

Please check this if you're filing an issue regarding TypeScript.

• I've read the typescript guide, in particular that create is to be used as create<T>()(...) and not create<T>(...).

[Ben Scobie]

@jeffreyyoung Did you resolve this? I've ran into the exact same thing so it would be good to know what you did.

UPDATE: I figured it out, I needed to set it in the returned function