Persist will not rerender UI in Nextjs when doing browser refresh

[kaisiant]

What I was doing is to keep the sidebar state in the local storage.

Here my code:
store.ts

export const useStore = create(
  persist(
    combine({ isSidebarCollapsed: false }, (set) => ({
      toggleSidebar: () =>
        set((state) => ({
          isSidebarCollapsed: !state.isSidebarCollapsed,
        })),
    })),
    {
      name: 'my-store',
      getStorage: () => localStorage,
    }
  )
)

layout.tsx

 const {
    isSidebarCollapsed,
    toggleSidebar,
  } = useStore((state) => ({ ...state }))

I am able to get the correct state after doing the refresh, the only problem is the UI cannot rerender.

[AnatoleLucet]

I can't reproduce the issue (or maybe I don't understand it?). I've created a codesandbox (https://codesandbox.io/s/priceless-wood-kp9t6?file=/pages/index.js) but the ui seems to show the persisted state (which I believe, is what you want).

[kaisiant]

Thanks for your response and CSB.
Ya, we can get the correct state after refresh but the main issue is cannot rerender the correct UI based on the state.

Modified your csb:
https://codesandbox.io/s/sleepy-grass-w64b1?file=/pages/index.js

1. toggle the side bar to collapse
2. click refresh
   Expect: Pink container with '5rem'
   Actual: Pink container with '15rem'

[kaisiant]

Solved with this solution:

export default dynamic(() => Promise.resolve(UserLayout), {
  ssr: false,
})

Solution: https://codesandbox.io/s/sleepy-grass-w64b1?file=/pages/index.js