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 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'
3const useIsomorphicLayoutEffect =
4 typeof window !== 'undefined' ? useLayoutEffect : useEffect
6export default useIsomorphicLayoutEffect


1import React from 'react'
3import { useIsomorphicLayoutEffect } from 'usehooks-ts'
5export default function Component() {
6 useIsomorphicLayoutEffect(() => {
7 console.log(
8 "In the browser, I'm an `useLayoutEffect`, but in SSR, I'm an `useEffect`.",
9 )
10 }, [])
12 return <p>Hello, world</p>

Edit on CodeSandbox

See a way to make this page better?
Edit there »