DEV Community

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

Victor de la Fouchardière on July 29, 2020

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 ...

Read full post

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.