Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Isomorphic effect that uses useLayoutEffect in browser and useEffect during SSR
useLayoutEffect in the browser and falls back to useEffect during SSR to avoid layout-effect warnings. This is useful when you need layout effects that work in both server and client environments.
import { useIsomorphicEffect } from '@kuzenbo/hooks';
import { useRef } from 'react';
function Demo() {
const ref = useRef<HTMLDivElement>(null);
useIsomorphicEffect(() => {
if (ref.current) {
// Safe to access DOM in browser, no-op during SSR
console.log('Element height:', ref.current.offsetHeight);
}
}, []);
return <div ref={ref}>Content</div>;
}
import { useIsomorphicEffect } from '@kuzenbo/hooks';
import { useRef, useState } from 'react';
function Demo() {
const ref = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState(0);
useIsomorphicEffect(() => {
if (ref.current) {
setHeight(ref.current.offsetHeight);
}
}, []);
return (
<div>
<div ref={ref}>Content to measure</div>
<p>Height: {height}px</p>
</div>
);
}
const useIsomorphicEffect =
typeof document === 'undefined' ? useEffect : useLayoutEffect
useEffect or useLayoutEffect:
useIsomorphicEffect(effect: EffectCallback, deps?: DependencyList): void