In zustand 4.5.1, useStore.setState(...) does not work correctly.

[willy-dunamu]

If you were previously using version 4.4.7 and then versioned up to 4.5.1, useStore.setState is not working correctly.
I'm using nextjs, and because the dome structure of ssr and csr is different, I was using useStore.setState by taking over the data passed in getServerSideProps from the csr end to set the initial settings in the _app.tsx file.
The reason I'm using the above method instead of const { setValue } = useStore() is that it doesn't work before the moment the DOM is first drawn, so I'm using setState.

function MyApp({ Component, pageProps, device, host, popularStocks }: MyAppProps) {
  const router = useRouter();

  const theme = useMemo(() => getTheme(ColorTheme.LIGHT), []);

  const { init } = useInitStore();

  if (!init) {
    useDeviceStore.setState({
      device,
      isMobile: device.type === DeviceType.MOBILE,
      isPC: device.type === DeviceType.PC,
    });
    useThemeStore.setState({
      theme,
      colorTheme: ColorTheme.LIGHT,
    });
    useHostStore.setState({ host });

...

}

The version I'm currently using in my project looks like this
"react": "^18.2.0",
"react-countup": "^6.1.1",
"next": "^13.1.1",

(I'm not very good at English, so I used a translator to help me out).

[dbritto-dev]

@willy-dunamu I encourage you to read our new nextjs guide. But let's talk about the new behavior which is the right one: on previous versions we use to use getState to get the initial data but wasn't the initial data since getState can be modified to return something else so we introduce getInitialState that gets a snapshot of initial state and can't be modified imperatively just declaratively using useEffect, this means you can't read/write from states on server and that's why you can't use setState on server to set the initial state. Everything is working as expected and is not an issue.

[willy-dunamu]

Thank you for your kind response.
I have read your answer, but there is still something I don't understand, so I have additional questions.
First of all, I'm not trying to store the state in setState on the server, I'm trying to setState before the DOM is drawn when using the data passed from the server in the CSR. To be more specific, when I use the data passed from the server in the CSR with the "onst { setValue } = useStore()" method, naturally the initial value is different from the DOM drawn in the SSR, and the blank screen is momentarily filled with data and flickering. However, when using setState, which was used in 4.4.7, the data was set before the DOM was drawn in the CSR, so unlike the above phenomenon, the data was filled from the initial render and did not flicker.
Is there something I'm not understanding or something I should be referring to with the bump to 4.5.0?

Attached is a file showing how the experience differs between 4.4.7 and 4.5.1.

• v4.4.7
  https://github.com/pmndrs/zustand/assets/74181188/e407a80d-e22e-4d49-a006-676fd3c5f217

• v4.5.1
  https://github.com/pmndrs/zustand/assets/74181188/265b1c5a-cfe9-4f10-b337-05b010dcf46c

[dbritto-dev]

@willy-dunamu well you need to understand that the initial state shouldn't be affected or modified, there's no thing like setting up the state before the initial render your component is render twice one on the server and one the client so keep that in mind. if you want to re-initialize your store with the data from the server you have two options: create the store with data or use useEffect to setup the initial data. BTW, keep in mind the rules and recommendations that we had in the nextjs guide, like you should create the store per request and you shouldn't use global stores.

[dbritto-dev]

@willy-dunamu I encourage you to read the nextjs and ssr hydration guides

[willy-dunamu]

As I explained earlier, what I'm trying to do has nothing to do with the sign language of SSR, I don't want to match the DOM drawn on the server side to the DOM on the client side, I just wanted to know if the way initialization is set on the client side works differently in 4.4.7 and 4.5.1.
Thanks for your answer. I'll take a look at the documentation and the other things you pointed out and see what I can do.
Thanks again.