A debounced TextField component for React + MaterialUI

DebouncedTextField.tsx

import { TextField, type TextFieldProps } from "@mui/material";
import { forwardRef, useImperativeHandle, useState } from "react";
import { type Options as UseDebouncedCallbackOptions, useDebouncedCallback } from "use-debounce";

export type DebouncedTextFieldRef = {
  cancelDebounce?: () => void;
  clear: () => void;
};

type DebouncedTextFieldProps = TextFieldProps & {
  debounceTime?: number;
  debounceOptions?: UseDebouncedCallbackOptions;
};

export const DebouncedTextField = forwardRef<DebouncedTextFieldRef, DebouncedTextFieldProps>(
  ({ value, onChange = () => {}, debounceTime, debounceOptions, ...props }, ref) => {
    const [localValue, setLocalValue] = useState(value);

    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setLocalValue(e.target.value);
      debouncedOnChange(e);
    };
    const debouncedOnChange = useDebouncedCallback<typeof handleOnChange>(
      onChange,
      debounceTime ?? 500,
      debounceOptions,
    );

    useImperativeHandle(ref, () => ({
      cancelDebounce: debouncedOnChange.cancel,
      clear: () => {
        setLocalValue("");
        debouncedOnChange.cancel();
      },
    }));

    useEffect(() => {
      if (value !== localValue) {
        setLocalValue(value);
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value]);

    return <TextField value={localValue} onChange={handleOnChange} {...props} />;
  },
);
DebouncedTextField.displayName = "DebouncedTextField";

useDebouncedState.ts

import { useState } from "react";
import { type Options as UseDebouncedCallbackOptions, useDebounce, useDebouncedCallback } from "use-debounce";

export const useDebouncedSetState = <T>(
  initialState: T,
  debounceTime?: number,
  debounceOptions?: UseDebouncedCallbackOptions,
) => {
  const [state, setState] = useState<T>(initialState);
  const debouncedSetState = useDebouncedCallback(setState, debounceTime, debounceOptions);
  return [state, debouncedSetState] as const;
};

export const useDebouncedState = <T>(initialState: T, delay: number, debounceOptions?: UseDebouncedCallbackOptions) => {
  const [state, setState] = useState<T>(initialState);
  const [debouncedState, debounce] = useDebounce(state, delay, debounceOptions);
  return [debouncedState, setState, debounce] as const;
};