How to cancel promise in componentWillUnmount() without using this.isMounted?

Question

I have to call API when the user stops typing and it is working perfectly fine. And I have to mount when the enter key is pressed. I made a Mock Component here which does this.

But, when the component is unmounted it shows the error Cannot call setState on an unmounted component. Previously I handled this error with this.isMounted. Now I was trying to handle it using promise cancelling in componentWillUnmount as mentioned in the React Blog.

this.cancellablePromise = makeCancelable(getSearchResults(word));

      this.cancellablePromise.promise
        .then(res => {
          console.log({ res });
          this.setState({ values: res });
        })
        .catch(err => console.log("error", err));
      console.log("in data ", this.cancellablePromise);
    }

The cancellablePromise gets assigned after the promise got resolved. So there is a null object in componentWillUnMount for cancellablePromise instance.

You should take look at promise-based debounce like https://github.com/slorber/awesome-debounce-promise . As explained here, observables are is much more suitable suitable for such tasks, https://stackoverflow.com/a/54328220/3731501 . It's a no-brainer with RxJS `debounce`. — Estus Flask, Jan 27 '19 at 17:56

score 0 · Answer 1 · answered Jan 27 '19 at 17:27

Looks like you just need to do the following thing:

myAwesomeMethod = () => {
    this.cancellablePromise = makeCancelable(getSearchResults(word));
    this.cancellablePromise
        .then(...)
        .catch(...)
}

componentWillUnmount() {
    this.cancellablePromise && this.cancellablePromise.cancel();
}

this.cancellablePromise will be undefined only in the case when you unmount your component before the call of the method with promise call.

score 0 · Answer 2 · answered Jan 27 '19 at 17:32

The issue is that your handleChange method calls debouncedGetSearchResult, but you are initializing this.cancellablePromise in getSearchResult. This leaves a 500ms window for the unmount to happen before you have initialized this.cancellablePromise.

You need to rework this so that the debouncing is part of the cancelable promise rather than prior to it.

How to cancel promise in componentWillUnmount() without using this.isMounted?

2 Answers2