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

View post

Replies for: i have implement axios way, but the problem that it cancel all requests immediately and not after leaving the component. is that a syntax error ? ...

hmm this looks correct to me - could you setup an code example on codesandbox?

Also this is a custom hook, right?

Yeah, this is a custom hook, here is an example of it's implementation,
i am reformatting code into an old react project, so i tried to implement it to see if it's efficient for the performance, so i can change it in the whole the project (Notice : when i implement it, i didn't change the other normal requests. It might be because of that, i don't know)

useEffect(() => {
    document.title = "Residanat | Liste des abonnées";
    GetAbonnes(page, sortOrder);
}, [page]);
const { data: abonne } = GetReqHandler(`admin/abonner?page=${page}`)
console.log("data ",abonne)

const FilterList = (e) => {
    setSortOrder(e.target.value);
    GetAbonnes(1, e.target.value);
    page += 1;
}

const ProfileUtilisateur = (user) => props.history.push(`/home/abonne/${user._id}`, { user });

const GetAbonnes = (pageNumber, sortBy) => {
    AbonneService.FilterListAbonne(pageNumber, sortBy)
        .then((res) => {
            if (res.error) ErrorHandler(res.error)
            else {
                if (pageNumber > 1) setListAbonne([...listAbonne, ...res.response]);
                else setListAbonne([...res.response]);
                if (res.response.length < 15) setLoadMore(false);
                else {
                    page += 1;
                    setLoadMore(true)
                }
            }
        })
}

Yurui Zhang • Jul 24 '20

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.

Farjallahmed • Jul 24 '20

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.

Yurui Zhang • Aug 2 '20

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

Thanks

Farjallahmed • Aug 2 '20

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