'use client' import { useTimeout } from "@/components/hooks/use-timeout" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { useState } from "react" import { Timer, RefreshCw, Clock, AlertCircle } from "lucide-react" export function UseTimeoutDemo() { const [isVisible, setIsVisible] = useState(false) const [delay, setDelay] = useState(3000) const [timeoutCount, setTimeoutCount] = useState(0) useTimeout( () => { if (isVisible) { setIsVisible(false) setTimeoutCount(prev => prev + 1) } }, isVisible ? delay : null ) return (

{/* Left Column - Interactive Demo */}

Timeout Demo

Content will disappear after the specified delay

{/* Content Display */}

{isVisible ? (

This content will disappear in {delay}ms

) : (

Content hidden

)}

{/* Controls */}

Timeout Delay:

{delay}ms

setDelay(newDelay)} min={1000} max={5000} step={500} className="py-4" />

Timeouts triggered:

{timeoutCount}

{/* Right Column - Documentation */}

About useTimeout

A declarative timeout hook that safely handles cleanup and updates.

{`const [visible, setVisible] = useState(true)

useTimeout(
  () => {
    setVisible(false)
  },
  visible ? 3000 : null
)`}

Features

Memory leak safe
Supports dynamic delays
Can be disabled with null
Updates callback reference

Common Use Cases

Auto-dismiss notifications
Delayed state updates
Loading states
Delayed animations

Pro Tip:

Pass null as delay to prevent the timeout from starting

) }