Persist Middleware | Wait for store to be hydrated but only return once #2531

agustingabiola · 2024-05-03T22:32:01Z

agustingabiola
May 3, 2024

Hello community. I'm struggling to avoid certain re-renders in my application using the persist middleware. One of the things I noticed is that after the store is hydrated from localstorage a new render takes place. In my particular case I only need the "initial hydrated" values only once to initialize a form and even though the values I request change during the wizard I only need them for the initial load.

// store.ts

export const wizardStore =
  create<T>()(
    persist(
      (set, get) => ({
        user: { name: "", ....},
      {
        name: "key"
      }
    )
  );

// component.tsx

export default Component() => {

  ...

  const userValues = wizardStore(
    (state) => state.user,
   () => wizardStore.persist.hydrated()
  );
  
  ...

In this case wizardStore.persist.hydrated() is true when it's evaluated after hydration (makes sense), so I tried creating a ref with the objective that it tries another time after being hydrated but that didn't update the value even though I checked old and new states and the information of the user name is there.

// componentWithRef.tsx

export default Component() => {

  ...

  const userValues = wizardStore(
    (state) => state.user,
    () => {
        if (wizardStore.persist.hydrated() && !ref.current) {
           ref.current = true;
           return false;
       }
       return true;
    }
  );
  
  ...

Adding this amount of code just to avoid a couple of re-renders seems overkill but I wanted to try and understand why it's not updated only once after store hydrated.

Thanks in advance.

Stack:

NextJS 14 Zustand 4.5.2