zustand does not behave properly with useLayoutEffect

[leobastiani]

IMO this codesandbox should not blink a red page

https://codesandbox.io/s/sad-currying-wwrm8

Is it an expected behavior?

[dai-shi]

Nice catch. I'd say it's not a desired behavior, but it's the expected behavior from the current implementation.

zustand/src/index.ts

Line 83 in a4307f3

useEffect(() => {

It subscribes in useEffect and to mitigate when it's changed before subscription it checks at L105.

To fix this behavior, we'd need to change this useEffect to useLayoutEffect, but I'm not sure if it's worth it.

Note this behavior is only for the mount time, once subscription is made, useLayoutEffect should work properly, I suppose.

[leobastiani]

Thank you!
It might be a hard decision to change it or not but I do think it should be changed or at least to have a caveat
I think that useIsoLayoutEffect seems to be more appropriated there.

[dai-shi]

Hm, in one of my libs, I used LayoutEffect as there's no other choices.

https://github.com/dai-shi/use-context-selector/blob/65eaf66e27555a78f3f46397f535c8b03f0b7899/src/index.ts#L169

useSubscription from react team uses passive Effect intentionally.

https://github.com/facebook/react/blob/d17086c7c813402a550d15a2f56dc43f1dbd1735/packages/use-subscription/src/useSubscription.js#L70

Maybe because it doesn't know the cost of subscribe.

Finally, react-redux uses LayoutEffect.

https://github.com/reduxjs/react-redux/blob/a9235530f4799dd4b2acb3cc65e9caf32efbc44b/src/hooks/useSelector.js#L55

---

As we know subscribe in zustand is pretty lightweight, we can change it to useIsomorphicLayoutEffect. (It would be obsoleted in v4-experimental #160 anyway.)

Anyone wants to open a PR? (Preferably with a test)

[leobastiani]

I'm working on it right now 🤗

[leobastiani]

#280