DebouncedInput component

For when an effect depends on the user to stop writing
import React from 'react';
import {useDebouncedCallback} from 'use-debounce';

import {noop} from '@/f/utils/noop';

export const DebouncedInput: React.FC<{
  placeholder: string,
  onChange: (value) => void,
  initialValue?: string,
}> = ({placeholder, onChange = noop, initialValue = ''}) => {
  const debounced = useDebouncedCallback(onChange, 500);

  return (
    <>
      <input
        type="text"
        defaultValue={initialValue}
        className="focus:ring-blue-500 focus:border-blue-500 block w-full px-4 text-sm border-gray-200 shadow-sm rounded-lg"
        placeholder={placeholder}
        onChange={(event) => debounced(event.target.value)}
      />
    </>
  );
};

Usage

<DebouncedInput placeholder="Search for a teammate" onChange={setSearchTerm} />