How does useLayoutEffect work during server-side rendering (SSR)?

The useLayoutEffect hook does not run on the server, because there is no DOM. React issues a warning in server environments like Next.js if useLayoutEffect is used directly.

This can be mitigated using a conditional polyfill:

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

i.e, Use useIsomorphicLayoutEffect in components that render both on client and server.