Theme-ui: `useLayoutEffect` and SSR mismatch

[VinSpee]

Hi! This is looking great.

I ran into an issue while setting up theme-ui in a Next.js project which is rendered on the server.

error:

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://fb.me/react-uselayouteffect-ssr for common fixes.

https://github.com/system-ui/theme-ui/blob/b782a1d51f676e009e09e8c361b4c19b96cc685c/packages/theme-ui/src/color-modes.js#L28-L39 appears to be the culprit.

According to the link referenced in the error, we'd either need to push this to useEffect (sounds undesirable), or, similar to what redux does, create a useIsomorphicLayoutEffect like this:

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect

thoughts?

[jxnblk]

Yeah, I did try to switch back to useEffect which I think is the right move tbh. There was an issue with the order of localStoarage calls that needs to be updated as well. If you wanna take a stab or look into this, that’d be super helpful! Also, if you’d like to add something similar to the gatsby plugin to prevent the visual flash in Next.js, that’s definitely something that’d be a great addition to the library

[VinSpee]

just wanted to mention that this is still on my mind and I've been kicking it around

[jxnblk]

@VinSpee going to close this issue in favor of #270