useTimeoutFn

Wrapper for setTimeout with controls

Usage

Live Editor

function Demo() {
  const [text, setText] = useState("Please wait for 3 seconds");
  const [isPending, start] = useTimeoutFn(
    () => {
      setText("Fired!");
    },
    3000,
    { immediate: false },
  );

  return (
    <div>
      <p>{text}</p>
      <button
        onClick={() => {
          setText("Please wait for 3 seconds");
          start();
        }}
      >
        {isPending ? "Pending" : "Restart"}
      </button>
    </div>
  );
};

Result

Please wait for 3 seconds

API

useTimeoutFn

Returns

Stoppable: A tuple with the following elements:

• Whether to wait for the timer to execute.
• Set timer.
• Cancel timer.

Arguments

Argument	Description	Type	DefaultValue
cb	callback	(...args: unknown[]) => any (Required)	-
interval	wait time	number (Required)	-
options	optional param	UseTimeoutFnOptions | undefined	-

UseTimeoutFnOptions

Property	Description	Type	DefaultValue
immediate	Start the timer immediate after calling this function	boolean	true