useTimeout

use-timeout.js

import { useState, useEffect } from 'react'

const removeKeyFromState = (key, setState) => {
    setState(({ [key]: deletedKey, ...restKeys }) => ({ ...restKeys }))
}

const useTimeout = () => {
    const [timeouts, setTimeouts] = useState({})

    useEffect(() => {
        return () => Object.values(timeouts).forEach(window.clearTimeout)
    }, [])

    const createTimeout = (callback, time, id = Math.random().toString()) => {
        if (timeouts[id]) {
            window.clearTimeout(timeouts[id])
        }

        const timeout = window.setTimeout(() => {
            callback()

            removeKeyFromState(id, setTimeouts)
        }, time)

        setTimeouts((oldTimeouts) => ({ ...oldTimeouts, [id]: timeout }))
    }

    const cancelTimeout = (id) => {
        window.clearTimeout(timeouts[id])

        removeKeyFromState(id, setTimeouts)
    }

    return { createTimeout, cancelTimeout }
}

export default useTimeout