Victor de la Fouchardière

Posted on Jul 29, 2020 • Updated on Aug 2, 2020

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

#react #javascript #tutorial #showdev

Hello guys ! 👋

Today, let's take a look at cancelling a web request with fetch and Abort Controller in React Hooks! 🤗

When we work with Fetch to manage data, we sometimes want to cancel the request (e.g. when we leave the current page, when we leave a modal, ...).

In the example below 👇, we fetch the data to display when switching route. But, we leave the route/page before the fetch is completed.

React hooks memory leaks 2 — 🚸 Source code 2/2

We just saw a memory leak in action! 💪🏼 Let’s see why this error occurred, and what it exactly means.

❓ WHY A MEMORY LEAK?: We have a component that performs an asynchronous fetch(url) task, then updates the state of the component to display the elements, BUT we unmount the component before the request is even completed. The state of the unmounted component is updated (e.g. setUsers, setState), which follows a memory leak.

🚀 Let's use the new AbortController API !

Abort Controller allows you to subscribe to one or more Web Requests with the ability to cancel them. 🔥

Basics of AbortController

First of all, let's create a new AbortController object instance.

Now, we can access to controller.signal.

"The signal read-only property of the AbortController interface returns an AbortSignal object instance, which can be used to communicate with/abort a DOM request as desired." MDN Source

Let's see how to use it 💪

And finally, if we want to cancel the current request, just call abort(). Also, you can get controller.signal.aborted which is a Boolean that indicates whether the request(s) the signal is communicating with is/are aborted (true) or not (false).

❗️ Note: When abort() is called, the fetch() promise rejects with a DOMException named AbortError.

Yeah, you just learned how to cancel a Web Request natively! 👏

🤩 Let's do this with React Hooks !

❌ BEFORE

Below is an example of a component that retrieves data in order to display them:

If I leave the page too fast and the request is not finished: MEMORY LEAK

✅ AFTER

So let's useEffect to subscribe to our fetch request and to avoid memory leaks. We use the clean method of useEffect for calling abort() when our component unmount.

Now, no more memory leaks! 😍

As always, feel free to reach out to me! 😉

You can check this demo on abort-with-react-hooks.vercel.app.
Also, here the source code of this article in this gist.

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière ・ Jul 22 '20

#javascript #productivity #chrome #tutorial

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière ・ Jul 15 '20

#html #css #ux #beginners

Top comments (19)

Tyler Smith • Jul 30 '20

Damn this is a really cool article. I've run into that memory leak error before and now I understand what it is I'm looking at. Thank you for writing this!

Victor de la Fouchardière • Jul 30 '20

A pleasure Tyler !!

Nans Dumortier • Jul 30 '20 • Edited

Heya !
Thanks for this well detailed article!!
I was facing the exact same issue, so I created this hook :
npmjs.com/package/use-state-if-mou...
It basically works like React's useState, but it only updates the state if the component is mounted !
I thought it's an easy and elegant solution for that issue, what do you think ?

Victor de la Fouchardière • Jul 30 '20

Yeah that's an idea ! I love that !! :)

Hemant Joshi • Jul 29 '20

What if i use redux? and use Axios rather than fetch?

Victor de la Fouchardière • Jul 29 '20

It's the same approch for redux. And I think Axios provide a cancel function.

Hemant Joshi • Jul 29 '20 • Edited

But I don't see a need for, never used Cancel kind of fun before also built some stuffs in React-Redux never saw console with such errors.......

const listArticles =()=> async(dispatch)=>{


    try{
        dispatch({type: ARTICLE_LIST_REQUEST});
        const {data}= await axios.get('https://dev.to/api/articles?username=hemant')
        dispatch({type:ARTICLE_LIST_SUCCESS, payload: data})
    }
    catch(error){
        dispatch({type:ARTICLE_LIST_FAIL, payload:error.message})

    }
}

I feel like your talking about dispatch........

Hemant Joshi • Jul 29 '20

+1. I am really new to React about 3-4 Months and would like to know in redux

Gautam Krishna R • Jul 29 '20

This thing happens every time if you are using react hooks: reactjs.org/docs/hooks-intro.html

Hemant Joshi • Jul 29 '20

Thanks × 1000 👍.

Gautam Krishna R • Jul 29 '20

This is one of the problem all people face when they are getting started with React. Thanks a lot for putting this out here so that it will help someone.

Victor de la Fouchardière • Jul 30 '20

Thank you Gautam !

Robert Myers • Jul 30 '20

In the final example, why use [fetchPosts] over []?

Victor de la Fouchardière • Jul 30 '20 • Edited

Because I use fetchPosts which is a dependency in my useEffect. But fetchPosts will never updated (it's a useCallback with []as dependency) so useEffect will not be executed a second time.

Robert Myers • Jul 30 '20 • Edited

Right, I understand why it works, but why pick one over the other? Would it be faster to not wrap in useCalllback and use []? This is a fetch, so I guess any savings would be washed away in network.

Victor de la Fouchardière • Jul 30 '20

I want to have a function for getting my data. Maybe in the future I would like to have a button to "refresh" my data. And call "fetchPosts" by clicking on it. Or maybe, for my future pagination by adding page as a new parameter of my function fetchPosts.

Ivan Ivanov • Jul 31 '20

Very nice article! Merci!

Victor de la Fouchardière • Jul 31 '20

🤗

Kamil Biedrzycki • Jul 30 '20

Looks like it's flagged as experimental (not sure why) but still worth to mention compatibility table caniuse.com/#feat=abortcontroller around this feature.

View full discussion (19 comments)

DEV Community

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

🚀 Let's use the new AbortController API !

Basics of AbortController

🤩 Let's do this with React Hooks !

❌ BEFORE

✅ AFTER

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière ・ Jul 22 '20

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière ・ Jul 15 '20

Top comments (19)

Read next

Optimizing React Components with useMemo and useCallback

Tim Berners-Lee : The Man Behind the Web

New to Frontend Engineering: 8 Things To Stop Doing

Custom Transitions in iOS 18 - #30DaysOfSwift