useIsomorphicLayoutEffect
A React hook that uses useLayoutEffect on the client and falls back to useEffect on the server to avoid SSR warnings.
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>;
}