useLayoutEffect warnings

[Mayke]

I thinks the useLayoutEffect around the library should be replaced by a safer version to prevent the boring 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.

An example of a safer useLayoutEffect:

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

[Tyler McGinnis]

The solution (as the warning says) is to not use hooks that use useLayoutEffect on the server. Here's some more discussion on it (just with another hook). #254

[Mayke]

@tylermcginnis what about components that needs to be rendered on both server and client. Not just for RSC but for simple SSR too. All of the cases that a use for example useClickAway, are in a component that needs to run o SSR.

[Kenan Mesic]

+1 on @sudomf. Here's a simple example of a component that runs on server and client (adds css on scroll). I've run into:

export const Header = () => {
  const [{ y }] = useWindowScroll();
  const addBorder = {
    [headerBottomBoxShadow]: y && y > 0,
  };
  return (
    <header className={classNames(header, addBorder)}>
      <NavBar />
    </header>
  );
};

Gets useLayoutEffect warnings