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
useLayoutEffectin SSR environments. - Uses
useLayoutEffecton the browser for synchronous DOM reads. - Falls back to
useEffecton 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>;
}