useLayoutEffect does nothing on the server in useClickAway hook

[Patricia García]

Hello,

I'm using the useClickAway hook from the @uidotdev/usehooks library in my Next.js application. When I run my application in development mode, I'm seeing the following warning in my console:

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.

I've traced this warning back to the useClickAway hook, which appears to be using useLayoutEffect. While this isn't causing any issues in the functionality of my application, the warning is a bit concerning as it suggests there could be a mismatch between the server-rendered and client-rendered output.

I understand that useLayoutEffect is necessary for certain use cases, but in a server-rendered environment like Next.js, it can cause warnings and potential hydration issues. Would it be possible to replace useLayoutEffect with useEffect in the useClickAway hook, or provide an alternative hook for server-rendered environments?

Thank you for your time and for providing this very useful library,
Patricia