Cancel a promise when a component is unmounted in ReactJS

Question

I've a component named "Item" which creates and calls a promise when it has been mounted.

class Item extends React.Component{
    constructor(props){
        super(props)
        this.onClick = this.onClick.bind(this)

        this.prom = new Promise((resolve, reject) => {
            setTimeout(() => resolve("PROMISE COMPLETED "+this.props.id),6000)
        })
    }

    componentDidMount(){
        this.prom.then((success) => {
            console.log(success)
        })
    }

    componentWillUnmount(){
       console.log("unmounted")
    }

    onClick(e){
        e.preventDefault()
        this.props.remove(this.props.id)
    }

    render(){
        return (
            <h1>Item {this.props.id} - <a href="#" onClick={this.onClick}>Remove</a></h1>
        )
    }
}

As you can see, the promise calls the resolve 6 seconds after it has been called.

There is another component named "List" that is responsible for showing those items on the screen. The "List" is the parent of the "Item" component.

class List extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            items : [1,2,3]
        }

        this.handleRemove = this.handleRemove.bind(this)
    }

    handleRemove(id){
        this.setState((prevState, props) => ({
            items : prevState.items.filter((cId) => cId != id)
        }));
    }

    render(){
        return (
            <div>
            {this.state.items.map((item) => (
                <Item key={item} id={item} remove={this.handleRemove}  />
            ))
            }
            </div>
        )
    }
}

ReactDOM.render(<List />,root)

On the example above, it shows three Item on the screen.

If I remove any of those components, componentWillUnmount() is called but also the promise which has been created in the removed component is run.

For example, I can see the promise of the second item is run even if I remove the second item.

unmounted 
PROMISE COMPLETED 1 
PROMISE COMPLETED 2 
PROMISE COMPLETED 3

I have to cancel the promise when a component is unmounted.

i think we can't check this answer: https://stackoverflow.com/questions/30233302/promise-is-it-possible-to-force-cancel-a-promise, check this also: https://esdiscuss.org/topic/cancellation-architectural-observations — Mayank Shukla, Jun 09 '17 at 12:31
Are you trying to call `Promise` constructor at `this.prom` only once? — guest271314, Jun 09 '17 at 17:41
Not sure I fully understand the question, but does [this fiddle](https://jsfiddle.net/5Lrw2jqq/) help? lines 8 and 28 are the ones to look at — Jaromanda X, Jun 10 '17 at 00:42

score 4 · Answer 1 · answered Aug 08 '18 at 05:57

A variation of this https://hshno.de/BJ46Xb_r7 seemed to work for me. I made an HOC with the mounted instance variable and wrapped all async components in it.

Below is what my code roughly loks like.

export function makeMountAware(Component) {
    return class MountAwareComponent extends React.Component {
        mounted = false;
        componentDidMount() {
            this.mounted = true;
        }
        componentWillUnmount() {
            this.mounted = false;
        }
        return (
            <Component 
                mounted = {this.mounted}
                {...this.props}
                {...this.state}
            />
        );
    }
}

class AsyncComponent extends React.Component {
    componentDidMount() {
        fetchAsyncData()
            .then(data => {
                this.props.mounted && this.setState(prevState => ({
                    ...prevState,
                    data
                }));
            });
    }
}
export default makeMountAware(AsyncComponent);

Won't this lead to a memory leak because even when the component is unmounted the promise is still holding a reference to it? — Liron Yahdav, May 11 '19 at 00:48

score 1 · Answer 2 · answered Jun 18 '17 at 11:50

1

You can't cancel native ES6 promises. Read more at https://medium.com/@benlesh/promise-cancellation-is-dead-long-live-promise-cancellation-c6601f1f5082

What you can do, however, is maybe use non-native promise libraries like Bluebird or Q, that give you promises that can be cancelled.

answered Jun 18 '17 at 11:50

Chitharanjan Das

1,283
10
15

https://stackoverflow.com/questions/29478751/how-to-cancel-an-emcascript6-vanilla-javascript-promise-chain – Emile Jun 18 '17 at 12:00
js promises are just but promises regardless of library used , @chitharanjan-das, do you mean to say native js promises cant be cancelled ? – Jimmy Obonyo Abor Jul 13 '18 at 01:09

score 1 · Answer 3 · answered Jun 18 '17 at 11:57

There are various things you can do. The simplest is to reject the promise:

this.prom = new Promise((resolve, reject) => {
     this.rejectProm = reject;
     ...
});

and then

componentWillUnmount(){
   if (this.rejectProm) {
      this.rejectProm();
      this.rejectProm = nil;
   }

   console.log("unmounted")
}

score 1 · Answer 4 · answered Jun 13 '19 at 20:33

Since you are using a timeout in this example you should clear it when unmounting.

class Item extends React.Component{
    constructor(props){
        super(props)
        this.onClick = this.onClick.bind(this)

        // attribute for the timeout
        this.timeout = null;

        this.prom = new Promise((resolve, reject) => {
          // assign timeout
          this.timeout = setTimeout(() => resolve("PROMISE COMPLETED "+this.props.id),6000)
        })
    }

    componentDidMount(){
        this.prom.then((success) => {
            console.log(success)
        })
    }

    componentWillUnmount(){
       // clear timeout
       clearTimeout(this.timeout);
       console.log("unmounted")
    }

My guess is this will result in a rejection and you won't see that console log.

Cancel a promise when a component is unmounted in ReactJS

4 Answers4

Linked