How to debounce input in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Debouncing input in React prevents excessive API calls and improves performance by delaying action execution until user input activity stops. As the creator of CoreUI with extensive React development experience since its early versions, I’ve implemented input debouncing in countless search interfaces, real-time validation, and data-driven components. From my expertise, the most effective approach is using useEffect with setTimeout to create debounced behavior that integrates seamlessly with React’s lifecycle. This pattern dramatically reduces server load while maintaining responsive user interactions in modern React applications.
Use useEffect with setTimeout to create debounced input behavior that delays API calls until typing stops.
import { useState, useEffect } from 'react'
function SearchComponent() {
const [query, setQuery] = useState('')
const [debouncedQuery, setDebouncedQuery] = useState('')
const [results, setResults] = useState([])
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedQuery(query)
}, 500)
return () => clearTimeout(timer)
}, [query])
useEffect(() => {
if (debouncedQuery.length > 2) {
fetchSearchResults(debouncedQuery)
.then(setResults)
}
}, [debouncedQuery])
return (
<div>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder='Search...'
/>
{results.map(result => (
<div key={result.id}>{result.title}</div>
))}
</div>
)
}
Here the first useEffect sets up a 500ms timer that updates debouncedQuery when the timer expires. The cleanup function clearTimeout(timer) cancels previous timers on each keystroke. The second useEffect monitors debouncedQuery and triggers the API call only after the user stops typing for 500ms. This approach separates immediate UI updates from expensive operations.
Best Practice Note:
This is the same approach we use in CoreUI React components for search inputs, live validation, and auto-save functionality in enterprise applications. Consider creating a custom useDebouncedValue hook to reuse this logic across multiple components for better code organization and consistency.
