# useTimeout

> Runs a callback once after a delay; cancel by passing null.

- Category: Effects
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-timeout

## Signature

```ts
useTimeout(callback: () => void, delay: number | null): void
```

## Parameters

- `callback`: `() => void` — Runs once after the delay elapses. The hook keeps a ref to the latest callback, so it always fires with fresh state.
- `delay`: `number | null` — Milliseconds to wait before firing. Pass null to disable — a change to null before the delay elapses cancels the pending timeout.

## Usage

```tsx
import { useState } from "react";
import { useTimeout } from "hookli";

export function Demo() {
  const [visible, setVisible] = useState(false);
  const [delay, setDelay] = useState<number | null>(null);

  useTimeout(() => {
    setVisible(true);
    setDelay(null);
  }, delay);

  return (
    <div>
      <button onClick={() => setDelay(2000)}>Reveal in 2s</button>
      {visible && <p>Here!</p>}
    </div>
  );
}
```

## Source

`src/hooks/use-timeout/use-timeout.ts`

```ts
import { useEffect, useRef } from "react";

export const useTimeout = (callback: () => void, delay: number | null) => {
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    if (delay === null) return;
    const id = setTimeout(() => savedCallback.current(), delay);
    return () => clearTimeout(id);
  }, [delay]);
};
```