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(() => {
// ...
})
}
I have the same issue with next.js, Is there a solution to solve that ?
Most helpful comment
I have the same issue with next.js, Is there a solution to solve that ?