The value I save to storage with persist is delayed when the page refreshes.

[aydinvivik]

Summary

When I refresh the page with the value I saved to localstorage with persist, it takes the old value for 1 second and then shows the new value. Is there any way to avoid this 1 second delay?

My example code is below;

use-store.js

'use client';

import { useState, useEffect } from 'react';

const useStore = (store, callback) => {
  const result = store(callback);
  const [data, setData] = useState();

  useEffect(() => {
    setData(result);
  }, [result]);

  return data;
};

export default useStore;

use-template.js

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const initialStates = {
  templateStatus: false,
};

const useTemplate = create(
  persist(
    (set) => ({
      ...initialStates,
      setTemplateStatus: () => {
        set((state) => ({ templateStatus: !state.templateStatus }));
      },
    }),
    {
      name: 'template-status',
    }
  )
);

export default useTemplate;

component.js

'use client';

import useStore from './store/use-store';
import useTemplate from './store/use-template';

export default function Home() {
  const templateStatus = useStore(
    useTemplate,
    (state: any) => state.templateStatus
  );
  const setTemplateStatus = useTemplate((state) => state.setTemplateStatus);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
        <p>template status: {templateStatus ? 'true' : 'false'}</p>
        <button onClick={setTemplateStatus}>change template status</button>
      </div>
    </main>
  );
}

Link to reproduction

https://stackblitz.com/edit/stackblitz-starters-jjsutv?file=app%2Fpage.tsx

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>(...).

[dai-shi]

Related with #2446?

[aydinvivik]

Yes, I thought I wrote that in the wrong place, I can delete the old one.

[aydinvivik]

I don't want to go back to redux but I don't understand how to solve such a problem.

[dbritto-dev]

@aydinvivik here you go -> https://stackblitz.com/edit/stackblitz-starters-hwoh91

[aydinvivik]

@dbritto-dev Thank you, but I think loading is hiding the problem here, if there is no loading I have the same situation again.

[dbritto-dev]

@aydinvivik you can't avoid that, reading from local storage is an async operation and you need to make sure the data is available before showing something

[dbritto-dev]

btw, you shouldn't hydrate/rehydrate or try to read something on server client when you are working on next or any ssr. we mentioned that on our nextjs guide.

[aydinvivik]

I understand, thank you for your feedback.