useIsomorphicLayoutEffect

useIsomorphicLayoutEffect selects useLayoutEffect in the browser and falls back to useEffect during server rendering.

It is useful for libraries that need layout timing in a browser but must avoid the server-rendering warning caused by calling useLayoutEffect during SSR.

InstallationCopy Anchor Link

CLICopy Anchor Link

npx shadcn add https://ui.tiesen.id.vn/r/use-isomorphic-layout-effect.json

ManualCopy Anchor Link

Copy and paste the following code into your project.

import { useEffect, useLayoutEffect } from 'react'export const useIsomorphicLayoutEffect =  typeof window === 'undefined' ? useEffect : useLayoutEffect

UsageCopy Anchor Link

import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect'

export function Measure() {
  useIsomorphicLayoutEffect(() => {
    // Read or update browser layout state.
  }, [])

  return null
}

Server renderingCopy Anchor Link

The selection happens when the module is evaluated:

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

On the server it behaves exactly like useEffect; in the browser it uses useLayoutEffect.

API ReferenceCopy Anchor Link

useIsomorphicLayoutEffectCopy Anchor Link

The export is an alias with the same signature as React's effects:

const useIsomorphicLayoutEffect: typeof useEffect | typeof useLayoutEffect

Use it exactly as you would use useLayoutEffect.