fetchers from useFetcher disappear from useFechers when component unmount

[blasterbug]

Hello, I have a very specific question about the hooks useFetcher and useFetchers. Not sure if this could actually be a feature request, a bug or maybe something that needs to be clarified.

Background: I use a library to render tables (AgGrid). When a cell is edited the library mount a React component to do the edit. In this component I use useFetcher to submit the data mutation. but as soon as the edition is done, the grid unmounts the component doing the edition before useFetcher has completed the submission. (and that seems to cancel it?) So I don't have access to the server response. I use optimistic UI, so it's ok, the component return the new value and the grid is updated. BUT, in case of error, after the component have been unmounted, I can not deal with the error/server response. So in a parent component I use the useFetchers hook to keep track of the running requests to rollback the edition and display the error message when an error occurs. (hope you're still with me). And this is where things get rocky... It seems as soon as the component calling useFetcher is unmount, the fetcher also disappear from the useFetchers hook.

In short my question is: Are fetchers removed from the useFetchers hook has the components calling useFetcher are unmounted? Is there a way to prevent that? or any workaround?

Two possible solutions I foresee would be:

• an option on useFetcher to not cancel the request when component unmount, so it is still accessible by another component using useFecthers,
• promise-ify fetcher.submit cause in this case I could work with the promise when it resolves, even in an unmounted component.

Looking forward to know your thoughts about that.

[sergiodxa]

That's an expected behavior.

useFetcher creates a new fetcher instance when the component mounts. Then when the component unmount the fetcher instance is removed.

useFetchers gives you access to the list of fetcher instances, but if the useFetcher unmount and the instance is removed it will be removed from the list.

Also, when the instance is removed Remix aborts the request.

How does AgGrid knows when to unmount the edit component? If you are doing something like

fetcher.submit(data)
unmount() // this tells AgGrid to unmount because you already did the submit

Then you should tell AgGrid to unmount once the fetcher.type is done.

[blasterbug]

@sergiodxa Thanks for your answer, it is exactly what I have been told on Discord. I do not have control over AgGrid unmounting the component, also for UX purposes we want the users to be able to edit the cells regardless of the time the server needs to complete the update.

I guess this would fit better in a feature request, where it would be nice to be able to tell Remix not to cancel a fetcher when though the component has been unmounted, so i could still access it from the useFetchers hook.