React useDebouncedCallback

example.tsx

import { useDebouncedCallback } from "./useDebouncedCallback"

export function Example() {
	const searchDebounced = useDebouncedCallback((query: string) => {
		// do something with query
	}, 500)

	return (
		<input
			onChange={(event) => {
				searchDebounced(event.target.value)
			}}
		/>
	)
}

useDebouncedCallback.ts

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

export function useDebouncedCallback<Args extends unknown[]>(
	callback: (...args: Args) => void,
	period: number,
) {
	// copy the callback to a ref so we always get the latest callback
	// without needing it as a useCallback dependency below
	const callbackRef = useRef(callback)
	useEffect(() => {
		callbackRef.current = callback
	})

	const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
	return useCallback(
		(...args: Args) => {
			if (timeoutRef.current) {
				clearTimeout(timeoutRef.current)
			}
			timeoutRef.current = setTimeout(() => {
				callbackRef.current(...args)
			}, period)
		},
		[period],
	)
}