A debounced Material UI TextField component

DebouncedTextField.tsx

import { TextField, TextFieldProps } from '@material-ui/core';
import { ChangeEvent, memo, useCallback, useEffect, useRef, useState } from 'react';

function DebouncedTextField({ value, onChange, timeout = 1000, ...props }: TextFieldProps & { timeout?: number }) {
  const timeoutHandlerRef = useRef<ReturnType<typeof setTimeout>>();
  const [currentValue, setCurrentValue] = useState(value);

  const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
    const value = event.target.value;
    setCurrentValue(value);

    if (!onChange) return;
    if (timeoutHandlerRef.current) clearTimeout(timeoutHandlerRef.current);
    timeoutHandlerRef.current = setTimeout(() => onChange(event), timeout);
  }, [onChange, timeout]);

  useEffect(() => {
    setCurrentValue(value);

    // clear possible timeout on unmount / input value change
    return () => timeoutHandlerRef.current && clearTimeout(timeoutHandlerRef.current);
  }, [value]);

  return (<TextField value={ currentValue } onChange={ handleChange } { ...props } />);
}

export default memo(DebouncedTextField);