[BUG] useLayoutEffect warning when rendering serverside

The change in #195 introduces useLayoutEffect to the the useViewportScroll (and the new useElementScroll) hook, that causes a React warning when rendering serverside.

See CodeSandbox

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://fb.me/react-uselayouteffect-ssr for common fixes.

A common fix is to create a useIsomorphicLayoutEffect that selects the right effect for the env.

const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect

function Comp() {
  useIsomorphicLayoutEffect(() => {
    // ...
  })
}

[seawatts]

I’m using NextJs 12 and Framer 6.2.6 and am seeing this error.

[Olovyannikov]

I solved this problem with:

const [isLoaded, setLoaded] = useState(false);
  
  useEffect(() => {
    setLoaded(true);
  }, []);

  if (!isLoaded) {
    return <></>;
  }
  
  return (
    <AnimatePresence exitBeforeEnter>
      // ....code
    </AnimatePresence>
  )