✨ Introducing you to the CLI ⚙️ - Manage your hooks with ease.

useIsomorphicLayoutEffect

A React hook that uses useLayoutEffect on the client and falls back to useEffect on the server to avoid SSR warnings.

useIsomorphicLayoutEffect
This component measures its own width using an isomorphic layout effect (no SSR warning).

Resize or hydrate to measure this box.

Box width: 0px

Installation

API

PropTypeDefaultDescription
effectEffectCallback() => voidThe effect function to run (layout effect on client, standard effect server)
depsDependencyList[]The dependency array (same as for useEffect).

Key Features & Details

  • Avoids the React warning about useLayoutEffect in SSR environments.
  • Uses useLayoutEffect on the browser for synchronous DOM reads.
  • Falls back to useEffect on the server, where layout effects no-op.

Examples

import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect';
 
function Component() {
  const ref = useRef<HTMLDivElement>(null);
  useIsomorphicLayoutEffect(() => {
    if (ref.current) {
      console.log(ref.current.clientHeight);
    }
  }, []);
  return <div ref={ref}>Hello</div>;
}

Related