Debounced input component for React onChange events using useCallback and Lodash debounce

DebouncedInput.tsx

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

export const Input = () => {
  const mySlowFunction = (value) => console.log(value);

  const debouncedEventHandler = useCallback(
    debounce((value) => mySlowFunction(value), 100),
    []
  );

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    debouncedEventHandler(event.target.value);
    event.preventDefault();

    return false;
  };

  return <input type="number" onChange={handleChange} />;
};