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.
React useIsomorphicLayoutEffect Hook preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-isomorphic-layout-effect hook into my projectRelated 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.