Cancel in-flight API requests in CSR components using AbortController with fetch, cleaning up in useEffect, or using data fetching libraries like SWR or React Query that handle cancellation automatically
In Client-Side Rendering (CSR), when a component unmounts while an API request is still in flight, React will throw an error if you try to update the state of an unmounted component. More importantly, the request continues to consume resources and may later attempt to update state that no longer exists, causing memory leaks and console warnings. The solution is to cancel in-flight requests during cleanup. The modern approach uses the AbortController API with fetch, which actually cancels the underlying network request, preventing it from ever resolving and calling setState on an unmounted component.
Modern data fetching libraries like SWR and React Query handle cancellation automatically, along with caching, deduplication, and many other edge cases. They're the recommended approach for production applications as they eliminate entire classes of bugs and provide better performance out of the box.
AbortController is supported in all modern browsers (Chrome, Firefox, Safari, Edge) .
For older browsers, you can use a polyfill or fall back to the isMounted flag pattern .
The isMounted flag alone prevents state updates but doesn't stop the network request from completing .
For production apps, the combination of AbortController + isMounted provides the most robust solution when not using a library .