Warning: useLayoutEffect does nothing on the server [...]

[axeldesutter]

Issue

I use Vaul inside a Remix app with vite and react@18.2.0. During development, Vite raises the following warning:

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.

Potential solution

This error is common with useLayoutEffect and the work-around is usually to create a useIsomorphicLayoutEffect hook, which you did in "vaul/src/use-prevent-scroll.ts":

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

However, React.useLayoutEffect is still referenced in "vaul/src/index.tsx" at line 456:

// LayoutEffect to prevent extra render where openProp and isOpen are not synced yet
456 | React.useLayoutEffect(() => {
457 | if (openProp) {
458 | setIsOpen(true);
459 | setHasBeenOpened(true);

I believe switching to useIsomorphicLayoutEffect would solve the issue ? Or maybe I am missing something and the warning should be ignored ?

// LayoutEffect to prevent extra render where openProp and isOpen are not synced yet
456 | useIsomorphicLayoutEffect(() => {
457 | if (openProp) {
458 | setIsOpen(true);
459 | setHasBeenOpened(true);

[vishaljak]

@emilkowalski Please can this be merged?

[lunahellinga]

Webpack with react@18.2.0 gives the same warning during development. It would be appreciated if either a fix or ignore for it would be merged.

[bernardinorafael]

hi @emilkowalski, can you see this one please