Lesson 9. Debouncing a user input 1. Basic implementation without debouncing

In this example, we create an input to perform a search calling an API. We use useEffect to make the call each time the input value search is modified.

const BasicImpl = () => {
  const [search, setSearch] = useState('')
  const [results, setResults] = useState([])

  useEffect(() => {
    let active = true

    fetch(`https://swapi.dev/api/people/?search=${search}`)
      .then((res) => res.json())
      .then(({ results }) => {
        if (active) setResults(results)
      })
      .catch((err) => console.error(err))

    return () => (active = false)
  }, [search])

  return (
    <>
      <input
        placeholder="Search…"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <ul>
        {results.map((result) => (
          <li key={result.name}>{result.name}</li>
        ))}
      </ul>
    </>
  )
}

render(BasicImpl)const BasicImpl = () => {
  const [search, setSearch] = useState('')
  const [results, setResults] = useState([])

  useEffect(() => {
    let active = true

    fetch(`https://swapi.dev/api/people/?search=${search}`)
      .then((res) => res.json())
      .then(({ results }) => {
        if (active) setResults(results)
      })
      .catch((err) => console.error(err))

    return () => (active = false)
  }, [search])

  return (
    <>
      <input
        placeholder="Search…"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <ul>
        {results.map((result) => (
          <li key={result.name}>{result.name}</li>
        ))}
      </ul>
    </>
  )
}

render(BasicImpl)
Result

While it works perfectly well, the problem with this approach is that the request is performed even if the search is changed quickly. If I type “R2-D2” in the input (quite fast), the search will be performed for “R”, then for “R2”, ”R2-”, etc.

We want to perform the search only once, or at least once every X milliseconds (300 milliseconds seems to be a typical value for search or autocomplete). This behavior is called debouncing: when the input is modified, we want to perform the search 300 milliseconds later, with the input's value at that time.