How do I debounce a search input without losing the latest result?

Dev Overflow

Home

Community

Collections

Find Jobs

How do I debounce a search input without losing the latest result?

asked 2 months ago

473

My debounced search occasionally renders stale results — a slow earlier request lands after a faster later one and overwrites it. Debouncing alone clearly isn't enough. How do people handle this?

react

javascript

typescript

1 Answer

Kenji Tanaka

• answered 2 months ago

You need cancellation on top of the debounce. The timer stops extra requests; a cancelled flag stops stale responses.

1useEffect(() => {
2  let cancelled = false
3
4  const timer = setTimeout(async () => {
5    const data = await search(query)
6    if (!cancelled) setResults(data)
7  }, 300)
8
9  return () => {
10    cancelled = true
11    clearTimeout(timer)
12  }
13}, [query])

1useEffect(() => {
2  let cancelled = false
3
4  const timer = setTimeout(async () => {
5    const data = await search(query)
6    if (!cancelled) setResults(data)
7  }, 300)
8
9  return () => {
10    cancelled = true
11    clearTimeout(timer)
12  }
13}, [query])

The cleanup runs before the next effect, so any in-flight response from a previous query is discarded rather than applied. With fetch you can go further and pass an AbortController signal so the request is dropped on the wire.

of 1

Write your answer here

Popular Tags

Global search

How do I debounce a search input without losing the latest result?

1 Answer

Write your answer here

Top Questions

Popular Tags