Important: In development with React Strict Mode enabled, this hook may invoke its callback twice. This is intentional to flush side effects and will not occur in production builds, outside Strict Mode or in React 19 or above.
Installation
API
Prop | Type | Default | Description |
---|---|---|---|
effect | EffectCallback | () => void | The effect function to run (layout effect on client, standard effect server) |
deps | DependencyList | [] | 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>;
}