clientLoader revalidate even though shouldRevalidate returns false

[prxg22]

I'm using React Router as a...

framework

Reproduction

1. Go to this stackblitz
2. On the reproduction browser, navigate to /main/view
3. Click the toggle theme button
4. Check the child clientLoader count increase

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 129.34 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.7 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 17.6
  npmPackages:
    @react-router/dev: ^7.1.0 => 7.1.0 
    @react-router/node: ^7.1.0 => 7.1.0 
    @react-router/serve: ^7.1.0 => 7.1.0 
    react-router: ^7.1.0 => 7.1.0 
    vite: ^5.4.11 => 5.4.11

Used Package Manager

npm

Expected Behavior

As reported in remix-run/remix#10234, single fetch feature introduced an unexpected behavior on clientLoader revalidation when using ssr = false strategy.

When a child route's shouldRevalidate function returns false, I expected that this route's clientLoader would not be triggered after a fetcher's submission in a parent route.

In my example / route has a fetcher.Form, that when submitted, should run its clientAction and revalidate that route's clientLoader, but routes /main and /main/view should not be revalidate, since their shouldRevalidate function will return false for that form submission.

Actual Behavior

After a fetcher submission in a parent route, child clientLoaders are being revalidated, even though their route's shouldRevalidate returns false.

In my example, you can check /main and /main/view counters increasing after each action dispatched by the parent route's fetcher.

[aland-x]

Reported this also in #12551 unfortunately I think @timdorr misunderstood the issue. I hope this makes it more clear.

[lukejagodzinski]

I have exactly same issue. I think it was fine in RR 7.0 but got broken in 7.1. However, my use case was a little bit different. In RR 7.0, when action failed with error 422 or whatever other 4XX, it didn't revalidate. Now it revalidates. So I thought I will fix it with the shouldRevalidate and then I discover this bug and I see I'm not the only one. The question also is, should it revalidate on error? I think, I heard in one of the streams that it will not revalidate on action error but I'm not sure in what version it's gonna be implemented

[matheuscscp]

@timdorr Can you please look into this? 🙏 😸

[lukejagodzinski]

I've just checked code and in deed it shouldn't revalidate on 4XX or 5XX. You can see it here:

react-router/packages/react-router/lib/router/router.ts

Lines 4219 to 4222 in 79e6bc9

	let actionStatus = pendingActionResult
	? pendingActionResult[1].statusCode
	: undefined;
	let shouldSkipRevalidation = actionStatus && actionStatus >= 400;

[prxg22]

@lukejagodzinski according to this doc, it should not revalidate if you throw or return a 4xx/5xx Response.