Shadcn.io is not affiliated with official shadcn/ui
React useIsomorphicLayoutEffect Hook
React useIsomorphicLayoutEffect hook—useLayoutEffect on client, useEffect on server. No SSR warnings. Drop-in replacement.
Use useLayoutEffect without SSR warnings. useIsomorphicLayoutEffect runs useLayoutEffect on the client and useEffect on the server. Same API as useLayoutEffect—just swap the import. Prevents the "useLayoutEffect does nothing on the server" warning in Next.js and other SSR frameworks. Use it for DOM measurements, scroll position, animations, or anything that needs synchronous DOM access before browser paint. Works with Next.js App Router, Pages Router, Remix, Gatsby, and any React SSR setup. Zero runtime overhead—just a conditional export.
React useIsomorphicLayoutEffect Hook preview
Installation
Related Components
React useEventCallback Hook
Stable callback reference
React useEventListener Hook
Attach any event listener safely
React useIsClient Hook
Check if running on client
React useResizeObserver Hook
Track element size changes
React useWindowSize Hook
Track window dimensions
React useScrollLock Hook
Lock body scroll
FAQ
Was this page helpful?
Sign in to leave feedback.