useTimeout

Hook to handle setTimeout timer function with the possibility to clear and promisify execution.

Demo

INFO

The component has:

• A count state initialized to 0.
• A delay state initialized to 1000.
• A useTimeout that receives a callback to update count by 1 and delay as time to delay execution.
• Two p tag to diplay current count and delay variable.
• A button to execute apply function returned from useTimeout.
• A button to increment by 1000 delay state.
• A button to restore delay state to 1000.
• A button to execute clear function returned from useTimeout.
• A button to execute applyPromisy function returned from useTimeout tha after count state update, restore delay state to 1000.

Loading demo…

Show source code

import { useState } from "react"
import { useTimeout } from "../../../..";

export const UseTimeout = () => {
	const [count, setCount] = useState(0);
	const [delay, setDelay] = useState(1000);
	const [apply, clear, applyPromisy] = useTimeout(
		() => setCount(c => c + 1),
		delay
	)

	return (
		<div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 50 }}>
			<p>Count: {count}</p>
			<p>Delay: {delay}</p>
			<div style={{ display: "grid", gridTemplateRows: "auto auto", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
				<button onClick={apply}>Increment count</button>
				<button onClick={clear}>Clear Timeout</button>
				<button onClick={async()=>applyPromisy().then(()=>setDelay(1000))}>Increment promisy</button>
				<button onClick={() => setDelay(d => d + 1000)}>Increment delay</button>
				<button onClick={() => setDelay(() => 1000)}>Clear delay</button>
			</div>
		</div>
	);
}

Types

UseTimeoutProps

• @template TArgs - The argument tuple type of the callback. Inferred automatically from the callback argument.

Parameters accepted by useTimeout.

Property	Type	Required	Description
callback	(...args: TArgs) => void	✓	The function to invoke after delay milliseconds. Accepts any number of arguments whose types are preserved on the returned start and startPromisified functions.
delay	number	✓	Duration in milliseconds to wait before invoking callback. Passed directly to setTimeout. A value of 0 defers execution to the next event loop tick.

UseTimeoutResult

• @template TArgs - The argument tuple type of the callback.

Return value of useTimeout.

Index	Type	Description
[0]	(...args: TArgs) => void	Schedules callback to run after delay milliseconds, forwarding any provided arguments. Cancels any previously pending timeout before scheduling a new one, so calling this multiple times in quick succession only results in a single invocation.
[1]	() => void	Cancels the currently pending timeout, if any. Has no effect if no timeout is active.
[2]	(...args: TArgs) => Promise<void>	Schedules callback exactly like the first tuple entry, but returns a Promise that resolves once callback has been invoked. Useful when downstream logic needs to await the timeout completion. Cancels any previously pending timeout before scheduling a new one.