Input.jsx

import { useState, useCallback } from "react";
import debounce from "lodash/debounce";

const Input = () => {
  const [inputValue, setInputValue] = useState("");

  const sendQuery = (query) => {
    // Call API with query parameter here
    console.log(query);
  };

  // Delay search by 600ms
  const delayedSearch = useCallback(
    debounce((q) => sendQuery(q), 600),
    []
  );

  const handleChange = (event) => {
    // Input will be changed immidiately
    setInputValue(event.target.value);
    
    // Search will only be called when user stops typing 
    delayedSearch(event.target.value);
  };

  return <input value={inputValue} onChange={handleChange} />;
};

export default Input;