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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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!
A pleasure Tyler !!
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 ?
Yeah that's an idea ! I love that !! :)
What if i use redux? and use Axios rather than fetch?
It's the same approch for redux. And I think Axios provide a cancel function.
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.......
I feel like your talking about dispatch........
+1. I am really new to React about 3-4 Months and would like to know in redux
This thing happens every time if you are using react hooks: reactjs.org/docs/hooks-intro.html
Thanks × 1000 👍.
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.
Thank you Gautam !
In the final example, why use
[fetchPosts]
over[]
?Because I use
fetchPosts
which is a dependency in my useEffect. ButfetchPosts
will never updated (it's auseCallback
with[]
as dependency) so useEffect will not be executed a second time.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.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 functionfetchPosts
.Very nice article! Merci!
🤗
Looks like it's flagged as experimental (not sure why) but still worth to mention compatibility table caniuse.com/#feat=abortcontroller around this feature.