ReactJS: Error while solving memory leak using makeCancellable method - reactjs

Question

I have encountered a memory leak error on in my react application. The error occurs when API call is made. My application renders 3 times because header and footer got setState and then todoList using setState.
Console error below
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. index.js:1446
I have tried _.isMounted method to solve the issue and worked also but then the solution is deprecated.
isMounted method code below ...
_isMounted = false
componentDidMount() {
this._isMounted = true
API.getTodoList().then(data => {
if (this._isMounted) {
this.setState({ itemList: data.data.itemList });
}
})
}
componentWillUnmount() {
this._isMounted = false
}
Later I tried makeCancelable method to fix memory leak. But it didnt solve the issue and got same memory leak error and another error from .catch()
API call:
// makeCancelable fn is defined at start
const makeCancelable = (promise) => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then(
val => hasCanceled_ ? reject({ isCanceled: true }) : resolve(val),
error => hasCanceled_ ? reject({ isCanceled: true }) : reject(error)
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
},
};
};
componentDidMount() {
console.log("didMount")
this.cancelRequest = makeCancelable(
axiosClient.get('/todoList')
.then((response) => {
this.setState({ itemList: response.data.data.itemList })
})
.catch(({ isCanceled, ...error }) => console.log('isCanceled', isCanceled))
)
}
componentWillUnmount() {
console.log("componentUnmount")
this.cancelRequest.cancel();
}
Is there any other way to solve memory leak error without using _.isMounted method.
I would appreciate the help.

Answer 1

The message warns against the possibility of memory leak. It doesn't states that there is one, although original code can result in memory leak, depending on how the request is performed
makeCancelable is misused, it cannot cause the entire promise chain it wraps to not be executed because promises aren't cancellable.
It should be:
this.cancelRequest = makeCancelable(
axiosClient.get('/todoList')
);
cancelRequest.promise
.then(...)
.catch(({ isCanceled, ...error }) => console.log('isCanceled', isCanceled))
There's no need to do this because Axios already provides cancellation:
this.cancelRequest = axios.CancelToken.source();
axiosClient.get('/todoList', { cancel: this.cancelRequest.token })
.then(...)
.catch(error => console.log('isCanceled', axios.isCancel(error)))