useLayoutEffect warning on the server side (SSR)

[horgen]

I have the following code rendering on both the server and client side:

const [isMenuOpen, setIsMenuOpen] = useState(false);

...

return (
    <FocusOn enabled={isMenuOpen}>
        <Nav isMenuOpen={isMenuOpen}>
            ...
        </Nav>
    </FocusOn>
);

When isMenuOpen is set to true, I show the menu as a fullscreen overlay/modal. The reason for the SSR case is because I need <Nav> to always be visible in the DOM (SEO).

This triggers this warning on the server:

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.
    at FocusLockUI (... /node_modules/react-focus-lock/dist/cjs/Lock.js:40:31)
    ...

[theKashey]

There is no layout effects used in FocusOn or FocusLock, but this problem might be related to https://github.com/theKashey/use-callback-ref/pull/43 Please give it a moment to get fixed and released. After please update the affected transitive dependency (remove record from lock file and regenerate)

I hope that will solve the issue. If not - please feel free to provide more detailed information starting from the used versions.

[chorgen]

Using react-focus-on v3.6.0

(on react 17.0.2 and nextjs 12.1.6)

[theKashey]

Fixed in v3.9.3

3.6.0 is waaaay behind the schedule