useTimeout

Declarative timeout tied to component lifetime.

Import

import { useTimeout } from '@kamod-ch/hooks'

Live demo

Basic demo

Declarative timeout tied to component lifetime.

Status: idle

import { useState } from 'preact/hooks'
import { useTimeout } from '@kamod-ch/hooks'

export default function UseTimeoutDemo() {
  const [armed, setArmed] = useState(false)
  const [status, setStatus] = useState('idle')
  useTimeout(() => { if (armed) setStatus('completed') }, armed ? 1000 : undefined)

  return (
    <div>
      <p><strong>Status:</strong> {status}</p>
      <div class="demo-actions">
        <button type="button" onClick={() => { setStatus('waiting'); setArmed(true) }}>Start timeout</button>
        <button type="button" onClick={() => { setArmed(false); setStatus('cancelled') }}>Cancel</button>
      </div>
    </div>
  )
}

API

TypeScript signature

declare const useTimeout: (fn: () => void, delay?: number) => () => void;
export default useTimeout;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.