useTimeout

useTimeout schedules a callback and gives you small controls to clear or restart that timer.

Auto-dismiss message

Banner cycle 1

Idle

Workspace synced successfully.

This banner dismisses after 4 seconds when the timer is armed.

Import


import { useTimeout } from "react-rsc-kit/client";

Signature


const { start, reset, clear, isPending } = useTimeout(callback, delay, options?);

Parameters

Name	Type	Default	Description
`callback`	`() => void`	required	Function that runs when the timeout completes.
`delay`	`number \| null \| undefined`	required	Delay in milliseconds. Use `null` or `undefined` to disable scheduling.
`options.autoStart`	`boolean`	`true`	Starts the timeout automatically when enabled.

Returns

Key	Description
`start`	Starts the timeout manually.
`reset`	Clears and starts the timeout again.
`clear`	Clears the current timeout.
`isPending`	Whether a timeout is currently active.

Usage


"use client";
 
import { useState } from "react";
import { useTimeout } from "react-rsc-kit/client";
 
export function TimeoutBanner() {
  const [visible, setVisible] = useState(true);
  const { start, clear, reset, isPending } = useTimeout(() => setVisible(false), 5000, {
    autoStart: false,
  });
 
  return (
    <div>
      <p>{visible ? "Banner visible" : "Banner hidden"}</p>
      <p>Pending: {String(isPending)}</p>
      <button
        type="button"
        onClick={() => {
          setVisible(true);
          start();
        }}
      >
        Start Timeout
      </button>
      <button type="button" onClick={clear}>
        Clear Timeout
      </button>
      <button
        type="button"
        onClick={() => {
          setVisible(true);
          reset();
        }}
      >
        Reset Timeout
      </button>
    </div>
  );
}

Notes

autoStart defaults to true.
delay can be null to disable scheduling.
start, clear, and reset are designed for small UI timer flows.
Use this for dismissible UI or simple delayed effects.