DEV Community

Discussion on: Clean Up Async Requests in `useEffect` Hooks

 
pallymore profile image
Yurui Zhang

Sorry for my late response.

I don't see any obvious errors with the implementation. maybe I'm not getting your question right - are you saying cancel is called right away when the component is still mounted? that shouldn't happen since you provided [] to useEffect which means it'll only run once and the clean up function is only called when the component unmounts (similar to componentDidMount + componentWillUnmount).

I made something similar to your first example and it works.
codesandbox.io/s/fast-cdn-j37lb?fi...

one quick things though: hook names should start with use - instead of GetReqHandler you probably want to rename it do useGetReqHandler.

Another thing to note is if you have hot module reloading - your page might unmount and re-mount the component which will cause cancellations - but if you are not doing that, I don't think the problem is here, you might want to check if your code works properly if you change it to a class component.

Thread Thread
 
farjallahmed profile image
Farjallahmed

Yea i thnik this is the problem.
instead of codesandbox here is the project on gitlab
React Project

the useGetReques used under home/abonne/abonne.js
and it's parent is home/home_container.js

if you could suggest a solution to solve this problem using hooks or i any kind of parameters.

Thread Thread
 
pallymore profile image
Yurui Zhang

Sorry again - would you mind adding me to that project? my gitlab handle is @pallymore

Thanks

Thread Thread
 
farjallahmed profile image
Farjallahmed

I have solve it, i had to change the root component of routes to class instead of fuctional component and it solved the problem