react functional component debounce

Search.jsx

import React, { useState, useRef } from 'react'
import debounce from 'lodash.debounce'

const Search = () => {
  // state text which was written in the input
  const [value, setValue] = useState('')

  // using "useRef" so that React doesn't create
  // debounced function on each render (after state update).
  const doSearch = useRef(
    // using debounce to delay request to backend
    debounce(searchQuery => {
      // backend request to do search
      fetch(`https://back.end?q=${searchQuery}`)
    }, 300)
  ).current

  const handleChange = event => {
    const nextValue = event.target.value
    // update input value
    setValue(nextValue)
    // do search request
    doSearch(nextValue)
  }
  
  return (
    <input value={value} onChange={handleChange} />
  )
}