Lodash debounce TypeError: Expected a function react

Question

I am trying to use the debounce function to avoid multiple calls when I'm typing and searching something in a datatable. What I am doing now is in the input

onChange={(e) => {
            const delayedQuery = useCallback(debounce(this.handleSearch(e.target.value), 500));
            return delayedQuery
          }}

where handeSearch is

handleSearch(filter) {
      service.getData(filter).subscribe((data) => {console.log(data)})
    }

but I have this error TypeError: Expected a function . The service is working but the debounce nope. It writes character by character at the same time I'm typing and that's not correct.

Answer 1

You can't use hooks in class components or in event handler functions and you have to pass a function to lodash debounce.

Also; if you try to read target.value asynchronously from an event you'll get a this synthetic event is reused for performance reasons error.

In chat I assume you use rxjs from(promise) so you still have a problem that when a user types and you fire async request they may resolve in a different order.

See below for a broken example (type in hai quickly and wait 2 seconds it resolves to ha)

//simple debounce implementation
const debounce = (fn, delay = 50) => {
  let time;
  return (...args) => {
    clearTimeout(time);
    time = setTimeout(() => fn(...args), delay);
  };
};
//service where you can subscribe to
const service = (() => {
  let listeners = [];
  const later = (value, time = 50) =>
    new Promise((r) =>
      //if search is 2 characters long it'll resolve much later
      setTimeout(
        () => r(value),
        value.length === 2 ? 2000 : time
      )
    );
  //subscribe returns an unsubscribe function
  const subScribe = (fn) => {
    listeners.push(fn);
    //return the Subscriber object
    //https://rxjs-dev.firebaseapp.com/api/index/class/Subscriber
    return {
      unsubscribe: () =>
        (listeners = listeners.filter(
          (listener) => listener !== fn
        )),
    };
  };
  //notify all listeners
  const notify = (value) =>
    listeners.forEach((listener) => listener(value));
  return {
    getData: (value) => ({
      subScribe: (fn) => {
        const unsub = subScribe(fn);
        later(value).then((value) => notify(value));
        return unsub;
      },
    }),
  };
})();

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { asyncSearchResult: '' };
    //use handleSearch to create a debounced version of it
    this.handleSearchDebounced = debounce(
      this.handleSearch
    ).bind(this); //you need to bind it to guearantee correct context
  }
  rendered = 0;
  handleSearch = (value) =>
    service
      .getData(value)
      .subScribe((value) =>
        this.setState({ asyncSearchResult: value })
      );
  render() {
    return (
      <div>
        <input
          type="text"
          // pass value to the handler, not the event
          onChange={(e) =>
            this.handleSearchDebounced(e.target.value)
          }
        />
        async result: {this.state.asyncSearchResult}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Here is the solution:

//simple debounce implementation
const debounce = (fn, delay = 50) => {
  let time;
  return (...args) => {
    clearTimeout(time);
    time = setTimeout(() => fn(...args), delay);
  };
};
//service where you can subscribe to
const service = (() => {
  let listeners = [];
  const later = (value, time = 50) =>
    new Promise((r) =>
      //if search is 2 characters long it'll resolve much later
      setTimeout(
        () => r(value),
        value.length === 2 ? 2000 : time
      )
    );
  //subscribe returns an unsubscribe function
  const subScribe = (fn) => {
    listeners.push(fn);
    //return the Subscriber object
    //https://rxjs-dev.firebaseapp.com/api/index/class/Subscriber
    return {
      unsubscribe: () =>
        (listeners = listeners.filter(
          (listener) => listener !== fn
        )),
    };
  };
  //notify all listeners
  const notify = (value) =>
    listeners.forEach((listener) => listener(value));
  return {
    getData: (value) => ({
      subScribe: (fn) => {
        const unsub = subScribe(fn);
        later(value).then((value) => notify(value));
        return unsub;
      },
    }),
  };
})();
const latestGetData = (value) => {
  const shared = {};
  return {
    subScribe: (fn) => {
      const current = {};
      shared.current = current;
      const subscriber = service
        .getData(value)
        .subScribe((result) => {
          //only call subscriber of latest resolved
          if (shared.current === current) {
            fn(result);
          }
          subscriber.unsubscribe();
        });
    },
  };
};
class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { asyncSearchResult: '' };
    //use handleSearch to create a debounced version of it
    this.handleSearchDebounced = debounce(
      this.handleSearch
    ).bind(this); //you need to bind it to guearantee correct context
  }
  rendered = 0;
  handleSearch = (value) =>
    latestGetData(value).subScribe((value) =>
      this.setState({ asyncSearchResult: value })
    );
  render() {
    return (
      <div>
        <input
          type="text"
          // pass value to the handler, not the event
          onChange={(e) =>
            this.handleSearchDebounced(e.target.value)
          }
        />
        async result: {this.state.asyncSearchResult}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>