'use client' import { useUnmount } from "@/components/hooks/use-unmount" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { useState, useEffect } from "react" import { toast } from "sonner" import { Terminal } from "lucide-react" function DemoChild() { useUnmount(() => { toast.info('Component unmounted! Cleanup performed.', { description: new Date().toLocaleTimeString() }) }) useEffect(() => { toast.success('Component mounted!', { description: new Date().toLocaleTimeString() }) }, []) return (

I will notify you when I'm unmounted

) } export function UseUnmountDemo() { const [isVisible, setIsVisible] = useState(true) const [mountCount, setMountCount] = useState(0) const toggleComponent = () => { if (!isVisible) { setMountCount(prev => prev + 1) } setIsVisible(prev => !prev) } return (

{/* Header */}

useUnmount Hook Demo

Toggle the component to see unmount callback in action

{/* Demo Controls */}

Mount count: {mountCount}

{/* Component Container */}

{isVisible && }

{/* Documentation */}

Hook Usage:

{`import { useUnmount } from "@/hooks/use-unmount"

function YourComponent() {
  useUnmount(() => {
    // Cleanup logic here
    console.log("Component unmounted!")
  })

  return Your component content
}`}

Common Use Cases:

Cleanup event listeners
Cancel network requests
Clear timers or intervals
Reset global state

) }