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 { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

// Merge conditional class names and resolve Tailwind conflicts.
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
}

Tailwind cn() class merger

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

#react

Debounced search input

Tailwind cn() class merger

useDebounce hook