juliencrn / usehooks-ts

React hook library, ready to use, written in Typescript.
https://usehooks-ts.com
MIT License
6.45k stars 419 forks source link

SSR issue using `useLayoutEffect()` with Nextjs #110

Closed juliencrn closed 2 years ago

juliencrn commented 2 years ago

I use useHover in my next app and have this error message:

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.

Solution:

Something like:

import { useEffect, useLayoutEffect } from 'react';

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

export default useIsomorphicLayoutEffect;
skve commented 2 years ago

+1, I've run into the same issue.