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

aydinvivik · 2024-03-29T21:03:31Z

aydinvivik
Mar 29, 2024

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 · 2024-03-29T23:20:09Z

dai-shi
Mar 29, 2024
Maintainer

Related with #2446?

1 reply

aydinvivik Mar 29, 2024
Author

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

aydinvivik · 2024-03-31T00:04:04Z

aydinvivik
Mar 31, 2024
Author

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

16 replies

dbritto-dev Apr 1, 2024
Maintainer

@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 Apr 1, 2024
Maintainer

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 Apr 1, 2024
Author

I understand, thank you for your feedback.

overvi Dec 22, 2024

import ThemeProvider from "@/providers/ThemeProvider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const InterF = Inter({
  variable: "--font-inter",
  subsets: ["cyrillic"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
                (function() {
              document.documentElement.style.setProperty('--base-font' , JSON.parse(localStorage.getItem("font-store")).state.fontSize)
                })();
              `,
          }}
        ></script>
      </head>

      <body
        className={`${InterF.variable} font-inter antialiased bg-main min-h-screen`}
      >
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

You can get the value directly in the head tag so it will load before the html

aydinvivik Dec 22, 2024
Author

Thank you @overvi I will try.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 17 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

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

aydinvivik Mar 29, 2024

Summary

Link to reproduction

Check List

Replies: 2 comments · 17 replies

dai-shi Mar 29, 2024 Maintainer

aydinvivik Mar 29, 2024 Author

aydinvivik Mar 31, 2024 Author

dbritto-dev Apr 1, 2024 Maintainer

dbritto-dev Apr 1, 2024 Maintainer

aydinvivik Apr 1, 2024 Author

overvi Dec 22, 2024

aydinvivik Dec 22, 2024 Author

aydinvivik
Mar 29, 2024

Replies: 2 comments 17 replies

dai-shi
Mar 29, 2024
Maintainer

aydinvivik Mar 29, 2024
Author

aydinvivik
Mar 31, 2024
Author

dbritto-dev Apr 1, 2024
Maintainer

dbritto-dev Apr 1, 2024
Maintainer

aydinvivik Apr 1, 2024
Author

aydinvivik Dec 22, 2024
Author