'use client' import { useIsomorphicLayoutEffect } from "@/components/hooks/use-isomorphic-layout-effect" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { useState, useEffect } from "react" import { LayoutGrid, Layers, RefreshCw, ArrowRight } from "lucide-react" export function UseIsomorphicLayoutEffectDemo() { const [count, setCount] = useState(0) const [layoutCount, setLayoutCount] = useState(0) const [lastEffect, setLastEffect] = useState("") const [effectLog, setEffectLog] = useState([]) useEffect(() => { if (count > 0) { setLastEffect("useEffect") setEffectLog(prev => [`useEffect executed (${count})`, ...prev.slice(0, 4)]) } }, [count]) useIsomorphicLayoutEffect(() => { if (layoutCount > 0) { setLastEffect("useIsomorphicLayoutEffect") setEffectLog(prev => [`useIsomorphicLayoutEffect executed (${layoutCount})`, ...prev.slice(0, 4)]) } }, [layoutCount]) return (

{/* Left Column - Interactive Demo */}

Interactive Demo

Compare useEffect vs useIsomorphicLayoutEffect

useEffect

useIsomorphicLayoutEffect

Execution Log:

{effectLog.map((log, index) => (

{log}

))} {effectLog.length === 0 && (

Click buttons above to see effects execution

)}

{/* Right Column - Documentation */}

About the Hook

useIsomorphicLayoutEffect automatically uses the appropriate effect hook based on the environment:

{`// Hook implementation
export const useIsomorphicLayoutEffect =
  typeof window !== "undefined" 
    ? React.useLayoutEffect 
    : React.useEffect`}

Browser

Uses useLayoutEffect

Runs synchronously after DOM mutations

Server (SSR)

Uses useEffect

Avoids SSR warnings

Use Cases

DOM measurements
DOM mutations that need to be sync
Tooltips positioning
Cross-environment compatibility

) }