SSR useLayoutEffect warning

[aadamsx]

I'm using Deno and Aleph and when adding in the Zustand library, I get the following warning:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. 
This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. 
To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. 
See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

I'm calling out to Zustand here: https://github.com/aadamsx/aleph-error3/blob/master/lib/useStore.ts

And when rendering the component I get the error here: https://github.com/aadamsx/aleph-error3/blob/master/components/People.tsx

This thread traces the problem and possible solutions: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

And here is where I raised the issue in Aleph: https://github.com/alephjs/aleph.js/issues/221#issuecomment-809024724

Is there any way Zustand can get around this warning for SSRs use cases?

[aulneau]

hm. seems fixed here -> https://github.com/pmndrs/zustand/blob/master/src/index.ts#L17 what version are you using?

[dai-shi]

https://github.com/pmndrs/zustand/blob/7049505720e5733d75b4b1a3e70e8814e17e9093/src/index.ts#L16-L17

There's only one place we have useLayoutEffect in code. So, in your env, window is defined, correct?

I have a fix in mind that is done in my other projects, which is to use UserAgent. The question is if it's possible to specify that in your env.

[aadamsx]

what version are you using?

I'm pulling like this, from https://esm.sh/zustand, which is zustand@3.3.3 it seems.

[dai-shi]

Sorry, my question wasn't clear. I wasn't familiar with Aleph. So, Deno has window defined.

Let me try something.