[Bug]: fetcher.load revalidate when navigation submit without running revalidate function

[CurryYangxx]

What version of React Router are you using?

6.23.0

Steps to Reproduce

The permission loader revalidates without running revalidate function in the config.

I dig into the source code.I found it go into this if condition.The loader was canceled because of action submit in this Component.But I found finally the loader is fulfilled and can get data from fetcher. I think maybe it should be deleted from the cancelledFetcherLoads array.Is there any race condition issue?

else if (cancelledFetcherLoads.includes(key)) {
      // Always revalidate if the fetcher was cancelled
      shouldRevalidate = true;
    }

react-router/packages/router/router.ts

Line 4397 in 77fca6e

} else if (cancelledFetcherLoads.includes(key)) {

Expected Behavior

The loader should determine if revalidate through the revalidate function.

Actual Behavior

The loader revalidate when navigation.

[brophdawg11]

Could you put together a minimal reproduction of the issue you're seeing so we can be sure we understand the problematic behavior?

[CurryYangxx]

Could you put together a minimal reproduction of the issue you're seeing so we can be sure we understand the problematic behavior?

@brophdawg11 This a sandbox for a demo to reproduce.
https://codesandbox.io/p/devbox/react-router-test-forked-6nmdty?file=%2Fsrc%2Froute%2Fchild.tsx%3A11%2C129

const loadFetcher = useFetcher();
fetcher.load('/loader')

const submitFetcherA = useFetcher();
fetcher.submit('/actionA');

const submitFetcherB = useFetcher();
fetcher.submit('/actionB');

I have one fetch.load and two fetcher.submit in my component, when the first action submit, the loadFetcher will be aborted in interruptActiveLoads and will add the fetcher key into cancelledFetcherLoads. Then the second action submit, the loadfetcher will be revalidated and finally executed successfully, but the cancelledFetcherLoads dosen't delete the key.

So when I trigger navigate first time, because of this line, the fetcher will be revalidate even if I return false in shouldRevalidate function.And finally the cancelledFetcherLoads will be empty in completeNavigation function.

react-router/packages/router/router.ts

Line 4397 in 77fca6e

} else if (cancelledFetcherLoads.includes(key)) {

So I think we need to delete the key from cancelledFetcherLoads after loaderFetcher revalidated success.

Also when I quickly click the navigate1 and navigate2 button in the demo, sometimes there is an error in the console.

[brophdawg11]

Hm, that link is broken for me:

[CurryYangxx]

@brophdawg11 Sorry, now I set the devbox to public access: https://codesandbox.io/p/devbox/react-router-test-forked-6nmdty
you can look into the child.tsx

[CurryYangxx]

@brophdawg11 Hello. Could you please take a look at this?

[brophdawg11]

Thanks for the repro!

[brophdawg11]

This should be resolved by #11839 and available in the next release 👍

[github-actions]

🤖 Hello there,

We just published version 6.26.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.26.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!