Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning on using Zustand

See original GitHub issue

I’m trying out Zustand with Aleph and get this warning on render:

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.
    at People (file:///Users/aadams/Projects/ms-email/.aleph/development/components/People.js#/components/People.tsx@1818f4:7:20)
    at main
    at App (file:///Users/aadams/Projects/ms-email/.aleph/development/app.js#543810:5:31)
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.
    at People (file:///Users/aadams/Projects/ms-email/.aleph/development/components/People.js#/components/People.tsx@1818f4:7:20)
    at main
    at App (file:///Users/aadams/Projects/ms-email/.aleph/development/app.js#543810:5:31)

$ aleph --version
aleph.js 0.3.0-alpha.22
deno 1.8.2
v8 9.0.257.3
typescript 4.2.2

My code: https://github.com/aadamsx/aleph-error3

Issue Analytics

State:
Created 2 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

shadowtime2000commented, Mar 30, 2021

@aadamsx

but of course it loads server side due to the way Aleph renders.

This is the way most frameworks like Next and Gatsby do to. It isn’t something that we can change - your just going to have to look on how you change the loading of the state management library.

1reaction

aadamsxcommented, Mar 30, 2021

@ije so what does SSR mode actually mean in the Aleph context?

The library that’s causing the useLayoutEffect error is actually the redux-like state management library Zustand library I’m importing. I’ve imported this into the /lib directory as you can see here: https://github.com/aadamsx/aleph-error3/blob/master/lib/useStore.ts

How do you handle this situation? I need the client-side state-management library in this component: https://github.com/aadamsx/aleph-error3/blob/master/components/People.tsx, but of course it loads server side due to the way Aleph renders.