function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
    const [value, setValue] = useState('')
    const debounced = useDebounce(value, 250)

    useEffect(() => {
        onSearch(debounced)
    }, [debounced, onSearch])

    return (
        <input
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="Search..."
        />
    )
}

Debounced search input

import { useState, useEffect } from 'react'

export function useDebounce<T>(value: T, delay = 300): T {
    const [debounced, setDebounced] = useState(value)

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay)
        return () => clearTimeout(id)
    }, [value, delay])

    return debounced
}

Tags

#hooks

Debounced search input

useDebounce hook