makecancelable

Yet another makeCancelable Promise wrapper, inspired by this article from React blog.

Quickstart

Install from the command line:

npm install makecancelable

Import into the source code:

import makeCancelable from 'makecancelable';

Use to make a promise cancelable*:

// User interface:
const renderOpeningCrawl = ({ opening_crawl }) => console.log(opening_crawl);

// Target promise:
const downloadEpisodeIV = fetch(
  'https://swapi.co/api/films/1/?format=json'
).then(response => response.json());

// Make rendering opening crawl cancelable:
const cancel = makeCancelable(
  downloadEpisodeIV,
  renderOpeningCrawl,
  console.error
);

// Cancel rendering opening crawl if it doesn’t download in one second:
setTimeout(() => {
  console.log('Too late, young Luke Skywalker');
  cancel();
}, 1000);

* It’s worth mentioning that calling cancel doesn’t cancel fetching the resource. Instead, it cancels rendering opening crawl (and errors if any).

For complete specification, see makeCancellable.test.js.

Using in React components

For a good reason, updating the state of an unmounted React component can lead to the following error in the console:

setState(…): Can only update a mounted or mounting component.
This usually means you called setState() on an unmounted component. This is a no-op

A typical example would be requesting a remote API in componentDidMount and updating the state after the API has responded. The user’s actions can lead to unmounting of the component (e.g. navigating to another app’s page) before calling setState.

The correct way to fix this issue, according to the article, is to cancel any callbacks in componentWillUnmount, prior to unmounting.

Without makeCancelable:

componentDidMount() {
  getDataFromApi()
    .then(data => this.setState({ data }))
    .catch(console.error);
}
componentWillUnmount() {
  /* nothing to cancel */
}

With makeCancelable:

componentDidMount() {
  this.cancelRequest = makeCancelable(
    getDataFromApi(),
    data => this.setState({ data }),
    console.error
  );
}
componentWillUnmount() {
  this.cancelRequest();
}

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.

Versioning

SemVer is used for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

• @istarkov for original makeCancelable implementation here;
• @jwbay for suggesting flushPromises here to use in tests.