React Higher-Order Component to handle promise cancelation when the component unmounts
npm install react-promise-cancelable> React Higher-Order Component to handle promise cancelation when the component unmounts.
React Cancelable is a Higher-Order Component that wraps handlers into new functions that return a Cancelable, which are safely canceled when the component unmounts.
``sh`
npm install react-promise-cancelable promise-cancelable --save
`sh`
yarn add react-promise-cancelable promise-cancelable
`js`
cancelable(
propsMapper: (ownerProps: Object) => Object
): HigherOrderComponent
Accepts a function that maps owner props to a new collection of props that are passed to the base component. The remapped props are wrapped functions around a new Cancelable that are safely canceled when the component unmounts.
Note: Every handlers that are not functions are therefore ignored.
after a component has unmounted. The Higher-Order Component keeps a list of registered cancelables and calls the Cancelable.cancel() method for each registered cancelable.`js
// ./delay.js
import Cancelable from 'promise-cancelable';export default delta =>
new Cancelable((resolve, reject, onCancel) => {
const id = setTimeout(() => {
resolve(id);
}, delta);
onCancel(() => {
clearTimeout(id);
});
});
`js
// ./my-component.js
import React, { Component } from 'react';
import delay from './delay';
import cancelable from 'react-promise-cancelable';class MyComponent extends Component {
state = { value: 'Not called' };
updateValue = () => {
// When the component unmounts the cancelable returned by
delay is
// canceled, so the setState method is not called.
this.cancelable = this.props.delay(1000).then(() => {
this.setState({ value: 'Called!' })
});
} cancel = () => {
if (this.cancelable) {
// Stop the progress of an ongoing asynchronous task.
this.cancelable.cancel();
}
}
render() {
return (
{this.state.value}
);
}
}export default cancelable(() => ({ delay }))(MyComponent);
`$3
Some HTTP clients provide a way to cancel requests. axios has a cancellation API using a cancel token.
We can create a new instance of
and patch its methods in order to make them cancelable.`js
//./axios.js
import Cancelable from 'promise-cancelable';
import axios from 'axios';const makeCancelableRequest = method => (...args) => {
return new Cancelable((resolve, reject, onCancel) => {
const { CancelToken } = axios;
// Create a cancellation token every time the method is called. This way we
// avoid creating global tokens that could cancel all the subscribed requests.
const source = CancelToken.source();
// We create a new instance internally to avoid polluting the global
// instance defaults.
const instance = axios.create();
instance.defaults.cancelToken = source.token;
instance
method
.then(result => {
resolve(result);
})
.catch(reason => {
// Check whether the reason is a cancellation notification.
if (!axios.isCancel(reason)) {
reject(reason);
}
});
onCancel(() => {
source.cancel();
});
});
};
const instance = axios.create();
// Example with
get.
instance.get = makeCancelableRequest('get');export default instance;
`Now we can import our own
instance and use it to create new requests that can be easily canceled whether when the user navigates to another page or by explicitly calling the cancel() method of that subscription.`js
// ./app.js
import axios from './axios';class App extends Component {
state = { loading: false };
getUsers = () => {
if (this.cancelable) {
// Cancel the previous request.
this.cancelable.cancel();
}
// Show an initial loader.
this.setState({ loading: true });
// When the component unmounts this request will be canceled.
this.cancelable = this.props.getUsers().then(() => {
this.setState({ loading: false });
}, () => {
this.setState({ loading: false });
});
}
render() {
return (
{this.state.loading ?
);
}
}export default cancelable(() => ({
getUsers: () => axios.get('/users')
}))(App);
``MIT © João Granado