Debouncing event example in a Reactjs component

.jsx

import React, { useState, useEffect, useCallback } from 'react';
import { debounce } from "lodash";

export default function Cz() {
  const delay = 3000;
  const [queryParams, setQueryParams] = useState({ search_field: '' });
  
  const delayedQuery = useCallback(debounce(() => {
      alert(1); // debounced func
  }, delay), [queryParams]);

  useEffect(() => {
      delayedQuery();

      // Cancel the debounce on useEffect cleanup
      return delayedQuery.cancel;
  }, [queryParams, delayedQuery]);
  
  const handleChange = (e) => setQueryParams({ queryParams..., [e.target.name]: e.target.value });
  
  return ( <input name="search_field" onChange={ handleChange } value={ queryParams.search_field } placeholder="search..." /> )
}