useFetcher's data still exists in router after navigation

[golden bolt]

Hello everyone,

I have a page for item, and there is a simple component with toggle to change state, so I use useFetcher (see screenshot). Works great, but fi after successfully submission I navigate to another page and then come back to item page my useEffect is triggered this data from last submission is still exists.

How I can fix that?

[idle vortex]

Can you add a timestamp to the fetcher? I believe the issue is that with a keyed fetcher your data persists much longer since you can retrieve it form a useFetchers in other parts of your app. I think if you removed the key you might get the behavior you want since a new key would get generated on each fresh component, but then you can’t access that data in useFetchers in other places. So if you can lose that data in other places try no key in the fetcher, if not try adding a timestamp to the mutation and checking if the timestamp is within +- 1 second

Someone else might have a better idea than me, but that’s probably the approach I’d try

[gray viper]

If you wish, just do fetcher.data = undefined

Then the data will be cleared out, but if you need some sort of state change effect, try wrapping with useCallback

[golden bolt]

Thank you, removing the key does the work.

[bleak veldt]

you don't need a key to access it from useFetchers

[idle vortex]

That’s true, I’ve seen people useFetchers before the key. I guess I should say you can’t access it by the same specific key with useFetchers. Is that the more correct response?

I’ve just not personally made much use of useFetchers but I thought people using keys might specifically want useFetchers and accessing a specific fetched by the key they defined

[bleak veldt]

so if you just want one fetcher you can just useFetcher again

like useFetcher({ key }) in one file where you submit and then again in another file where you read the submission status