useProxy and useLayoutEffect

[juliancwirko]

I'm getting a warning regarding useEffectLayout and SSR on the server side in Next.js (the newest version). Are there any drawbacks to something like this?

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

export function useProxy<T extends object>(proxy: T): T {
  const snapshot = useSnapshot(proxy) as T

  let isRendering = true

  useIsomorphicEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    isRendering = false
  })

  return new Proxy(proxy, {
    get(target, prop) {
      return isRendering ? snapshot[prop as keyof T] : target[prop as keyof T]
    },
  })
}

[dai-shi]

useEffect is no-op on server. And, it's very hard to detect if we are on sever.
If you can't live with the false positive warning, you could do something like this.

import { snapshot } from 'valtio'
import { useProxy as useProxyOrig } from 'valtio/utils'

const isSSR = typeof window === 'undefined' // this is usually not enough
export const useProxy = isSSR ? (p) => snapshot(p) : useProxyOrig

[aretrace]

it's very hard to detect if we are on sever

would somthing like:

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' &&
  typeof window.document !== 'undefined' &&
  typeof window.document.createElement !== 'undefined'
    ? useLayoutEffect
    : useEffect;

be enough to introduce useIsomorphicLayoutEffect into valtio itself?
using valtio with astro and facebook/react#14363 is flooding the dev logs as well

[dai-shi]

Well, I was so happy to say good bye to useIsomorphicLayoutEffect: https://x.com/dai_shi/status/1636022438696980480
It was a wrong conception and I think useIsomorphicLayoutEffect misguided the community.

Does this work for you? export const useSnapshot = isSSR ? (p) => snapshot(p) : useSnapshotOrig

We can provide it as a special util, but I think it's better not to hide this problem, because it was a false positive and it will be fixed soon.

[aretrace]

isSSR works 👍
ty for pointing out facebook/react#26395, I'll use the workaround for now but I imagine others stuck on older versions in the future would appreciate a util for this.

[dai-shi]

Let's add it in the migration guide for now.
Would you like to send a PR?

[aretrace]

👉 #944