debounceInput.jsx

import { useMemo, useState, useEffect } from "react";
import { debounce } from "lodash";

export default function Input() {
  const [query, setQuery] = useState("");

  const changeHandler = (event) => {
    setQuery(event.target.value);
  };
  const debouncedChangeHandler = useMemo(
    () => debounce(changeHandler, 300),
    []
  );

  // Stop the invocation of the debounced function
  // after unmounting
  useEffect(() => {
    return () => {
      debouncedChangeHandler.cancel();
    };
  }, [debouncedChangeHandler]);

  return (
    <>
      <input
        onChange={debouncedChangeHandler}
        placeholder="Type a query..."
        name="inputExample"
      />

      <div>{query}</div>
    </>
  );
}