useTimeout

Runs a function when the component mounts but with a given delay.

Installation

npx rabbithook@latest add use-timeout

Usage

App.tsx

import useTimeout from "@/hooks/use-timeout";

function Component() {
  useTimeout(() => {
    console.log("This will run after 2 seconds");
  }, 2 * 1000 /* 2 seconds */);

  return ();
}

Code

Typescript

use-timeout.ts

import { useRef, useEffect, useCallback } from "react"

function useTimeout(callback: Function, delay: number) {
  const callbackRef = useRef(callback)
  const timeoutRef = useRef<NodeJS.Timeout>()

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

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
  }, [delay])

  const clear = useCallback(() => {
    timeoutRef.current && clearTimeout(timeoutRef.current);
  }, [])

  useEffect(() => {
    set();
    return clear;
  }, [delay, set, clear])

  const reset = useCallback(() => {
    clear();
    set();
  }, [clear, set])

  return { reset, clear }
}

export default useTimeout;

Javascript

use-timeout.js

import { useRef, useEffect, useCallback } from "react"

function useTimeout(callback, delay) {
  const callbackRef = useRef(callback)
  const timeoutRef = useRef(0)

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

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
  }, [delay])

  const clear = useCallback(() => {
    timeoutRef.current && clearTimeout(timeoutRef.current);
  }, [])

  useEffect(() => {
    set();
    return clear;
  }, [delay, set, clear])

  const reset = useCallback(() => {
    clear();
    set();
  }, [clear, set])

  return { reset, clear };
}

export default useTimeout;