DEV Community

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

🍦 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 ...
Collapse
 
tylerlwsmith profile image
Tyler Smith

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!

Collapse
 
viclafouch profile image
Victor de la Fouchardière

A pleasure Tyler !!

Collapse
 
nans profile image
Nans Dumortier • 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 ?

Collapse
 
viclafouch profile image
Victor de la Fouchardière

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

Collapse
 
hemant profile image
Hemant Joshi

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

Collapse
 
viclafouch profile image
Victor de la Fouchardière

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

Collapse
 
hemant profile image
Hemant Joshi • 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........

Thread Thread
 
hemant profile image
Hemant Joshi

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

Thread Thread
 
gautamkrishnar profile image
Gautam Krishna R

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

Thread Thread
 
hemant profile image
Hemant Joshi

Thanks × 1000 👍.

Collapse
 
gautamkrishnar profile image
Gautam Krishna R

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.

Collapse
 
viclafouch profile image
Victor de la Fouchardière

Thank you Gautam !

Collapse
 
sqlrob profile image
Robert Myers

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

Collapse
 
viclafouch profile image
Victor de la Fouchardière • 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.

Collapse
 
sqlrob profile image
Robert Myers • 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.

Thread Thread
 
viclafouch profile image
Victor de la Fouchardière

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.

Collapse
 
ivivanov18 profile image
Ivan Ivanov

Very nice article! Merci!

Collapse
 
viclafouch profile image
Victor de la Fouchardière

🤗

Collapse
 
kbiedrzycki profile image
Kamil Biedrzycki

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