Input with auto debounce

Input.tsx

import { debounce } from "es-toolkit";
import {
  useCallback,
  useRef,
  useState,
  type ChangeEventHandler,
  type InputHTMLAttributes,
} from "react";
import { useUpdateEffect } from "react-use";

export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  /**
   * if set to true, debounce onChange
   * note: input text itself is never debounced, user typing shouldn't have any lag
   */
  debounced?: boolean;
  debounceMs?: number;
};

export function Input(props: InputProps) {
  const {
    value: valueProp,
    onChange: onChangeProp,
    debounced = false,
    debounceMs = 300,
    ...inputProps
  } = props;

  const [internalValue, setInternalValue] = useState(valueProp);

  useUpdateEffect(() => {
    setInternalValue(valueProp);
  }, [valueProp]);

  const onChangeDebounced = useCallback(
    debounce<ChangeEventHandler<HTMLInputElement>>((e) => {
      onChangeProp && onChangeProp(e);
    }, debounceMs),
    [debounceMs],
  );

  return (
    <input
      value={internalValue}
      onChange={(e) => {
        setInternalValue(e.target.value);
        if (!onChangeProp) {
          return;
        }
        // intercept onChange, debounce if needed
        const onChangeHandler = debounced ? onChangeDebounced : onChangeProp;
        onChangeHandler(e);
      }}
      {...inputProps}
    />
  );
}