Canceling Requests within React Components
Why Canceling is Needed? 🔍
When a React component is unmounted, belonging AJAX requests using Fetch/Axios no longer need to be executed. Sometimes, a not canceled request from an unmounted component may trigger some unexpected and unwanted updates.
Above code will try to make a request to
url and alert the stringified response data after 5 seconds.
It will actually never be able to make the request because
controller.abort() is executed before the inner function of the
This code is doing identical task as the above example using
Fetch . The only difference is that while
Fetch is using
AbortController for abort,
Axios has its own cancel token, the withdrawn cancelable promises proposal, for canceling.
React Class Component
When you need to implement the canceling logic in React class component, you will need to keep your generated tokens per every requests you made. I assume that the
makeRequest is called through an event. When the component is unmounted, you will need to
abort all the tokens you made within this component.
Since React v16.8, hooks are available and adopted with high popularity due to its simpleness. This example is the identical implementation of the above class component version.
I introduced the ways to cancel the requests made by
Axios within a React Component in two differents styles, class and hooks.
By canceling all the belonging requests, there would be no unexpected side effects like trying to updated unmounted React component.