useIsomorphicLayoutEffect

"use client";

import { useIsomorphicLayoutEffect } from "@zentauri-ui/zentauri-components/lib/useIsomorphicLayoutEffect";
import { HookDemoPanel } from "@/components/preview/hooks/hook-demo-panel";
import { useEffect, useRef, useState } from "react";

export default function HookDemo() {
  const ref = useRef<HTMLDivElement>(null);
  const [layout, setLayout] = useState(0);
  const [effect, setEffect] = useState(0);

  useIsomorphicLayoutEffect(() => {
    setLayout(ref.current?.offsetHeight ?? 0);
  });

  useEffect(() => {
    const frame = requestAnimationFrame(() => {
      setEffect(ref.current?.offsetHeight ?? 0);
    });
    return () => cancelAnimationFrame(frame);
  }, []);

  return (
    <HookDemoPanel title="Interactive demo">
      <p className="mb-4 text-sm text-slate-400">
        After first paint, layout measurement from useIsomorphicLayoutEffect typically
        matches the element; both values are shown for this static box.
      </p>
      <div
        ref={ref}
        className="mb-4 inline-block min-h-[80px] rounded-lg border border-white/10 bg-slate-900/60 px-6 py-4"
      >
        Target box
      </div>
      <dl className="grid gap-1 text-sm sm:grid-cols-2">
        <dt className="text-slate-500">Layout effect height</dt>
        <dd className="font-mono text-cyan-200">{layout}px</dd>
        <dt className="text-slate-500">useEffect height (initial)</dt>
        <dd className="font-mono text-slate-300">{effect}px</dd>
      </dl>
    </HookDemoPanel>
  );
}