Provides a lodash debounced based implementation of an onChange handler to update state with full Typescript support

typescriptDebouncedOnChangeImplementation.tsx

import React, {
  useState,
  useEffect,
  ChangeEvent,
  useMemo,
  ChangeEventHandler,
} from "react";
import { TextField } from "@material-ui/core";
import { debounce } from "lodash";

const SampleComponent: React.FunctionComponent = () => {
  const [searchQuery, setSearchQuery] = useState<string | undefined>();

  // Create a cached debounce function for change handling
  const onSearchChange = useMemo(
    () =>
      debounce<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>(
        (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
          setSearchQuery(event.target.value);
        },
        250
      ),
    [setSearchQuery]
  );
  // Stop the invocation of the debounced function after unmounting
  useEffect(() => {
    // Note that this is a clean up effect, so its logic must be in a returned function.
    return () => {
      onSearchChange?.cancel();
    };
  }, [onSearchChange]);

  return (
    <TextField
      autoFocus
      placeholder="Search"
      type={"search"}
      onChange={onSearchChange}
      value={searchQuery}
    />
  );
};
export default SampleComponent;