useIsomorphicLayoutEffect()
The React documentation says about useLayoutEffect
:
The signature is identical to useEffect, but it fires synchronously after all DOM mutations.
That means this hook is a browser hook. But React code could be generated from the server without the Window API.
If you're using NextJS, you'll 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.
This hook fixes this problem by switching between useEffect
and useLayoutEffect
following the execution environment.
The Hook
1import { useEffect, useLayoutEffect } from 'react'23const useIsomorphicLayoutEffect =4 typeof window !== 'undefined' ? useLayoutEffect : useEffect56export default useIsomorphicLayoutEffect
Usage
1import { useIsomorphicLayoutEffect } from 'usehooks-ts'23export default function Component() {4 useIsomorphicLayoutEffect(() => {5 console.log(6 "In the browser, I'm an `useLayoutEffect`, but in SSR, I'm an `useEffect`.",7 )8 }, [])910 return <p>Hello, world</p>11}
See a way to make this page better?
Edit there »