useIsMounted

"use client";

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

export default function HookDemo() {
  const isMounted = useIsMounted();
  const [label, setLabel] = useState("");
  const timeoutRef = useRef<number | undefined>(undefined);

  useEffect(() => {
    return () => {
      window.clearTimeout(timeoutRef.current);
    };
  }, []);

  const run = () => {
    window.clearTimeout(timeoutRef.current);
    timeoutRef.current = window.setTimeout(() => {
      timeoutRef.current = undefined;
      if (!isMounted()) {
        return;
      }
      setLabel("mounted (still on this page after 50ms)");
    }, 50);
  };

  return (
    <HookDemoPanel title="Interactive demo">
      <p className="mb-4 text-sm text-slate-400">
        Schedules a timeout, then updates state only if this demo is still mounted. Leave
        this page before 50ms and the callback does nothing (and the timer is cleared on
        unmount).
      </p>
      <Button type="button" onClick={run}>
        Check mounted in 50ms
      </Button>
      {label ? (
        <p className="mt-4 text-sm text-white">
          Result: <span className="text-cyan-300">{label}</span>
        </p>
      ) : null}
    </HookDemoPanel>
  );
}