Rxjs debounce on react text input component using Subjects does not batch input text on stateless/functional component

Question

I\'m trying to dive deeper into rxjs and found an issue where the input field I\'m trying to debounce dispatches an event on every keypress, the debounce only holds the outp

Answer 1

Here is a version as custom Hook as this might be used multiple times in a form and can otherwise clutter your code.

function useDebounce(time: number, defaultValue: T): [T, (v: T) => void] {
  let [value, setValue] = React.useState(defaultValue);
  let [value$] = React.useState(() => new Subject());
  React.useEffect(() => {
    let sub = value$.pipe(debounceTime(time)).subscribe(setValue);
    return () => sub.unsubscribe();
  }, [time, value$]);
 return [value, (v) => value$.next(v)];
}

//useage: 
let [value,setValue] = useDebounce(200,"");