useDebounce React Hook

$useDebounce.txt

#

useDebounce.js

import useTimeout from '@/hooks/useTimeout/useTimeout'
import React, { useEffect } from 'react'

export default function useDebounce(callback, delay, dependencies) {
    const { reset, clear } = useTimeout(callback, delay)
    useEffect(reset, [...dependencies, reset])

    // eslint-disable-next-line react-hooks/exhaustive-deps
    useEffect(clear, [])
}

UseDebounceExampleComponent.jsx

import useDebounce from '@/hooks/useDebounce/useDebounce'
import React, { useState } from 'react'

export default function UseDebounceExampleComponent() {
    const [count, setCount] = useState(10)
    useDebounce(() => alert(count), 1000, [count])

    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount((c) => c + 1)}>Increment</button>
        </div>
    )
}