Action returning 4XX status code called using fetcher does unnecessary revalidation

[lukejagodzinski]

I'm using React Router as a...

framework

Reproduction

https://github.com/lukejagodzinski/rr-should-revalidate-repro

1. Run npm run dev
2. Open app in the browser
3. Open "Network" tab in the browser dev tools
4. Click the "Use fetcher" button to call action using fetcher
5. Observe that the request is made and 422 response is returned and the unnecessary revalidation is triggered. This should not happen according to docs.
6. Click the "Use form submit" button to call the same action but using regular form submission
7. Observe that the request is made and 422 response is returned but the revalidation is not triggered. This is the expected behavior.

You can also fix the issue by uncommenting the shouldRevalidate function in app/routes/home.tsx:14. However, that should not be necessary.

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 9.68 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    bun: 1.0.28 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.99
    Safari: 18.1.1
  npmPackages:
    @react-router/dev: ^7.2.0 => 7.2.0 
    @react-router/node: ^7.2.0 => 7.2.0 
    @react-router/serve: ^7.2.0 => 7.2.0 
    react-router: ^7.2.0 => 7.2.0 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

RR shouldn't revalidate loaders when action returning error is being called using fetcher

Actual Behavior

RR revalidates loaders after action returning error is being called using fetcher

[bradleylandis]

Is this supposed to work with data()? I think it will not revalidate if you return a Response with the status code in the 400 range.

the comment on data() says "Create "responses" that contain status/headers without forcing

• serialization into an actual Response - used by Remix single fetch".

[lukejagodzinski]

Is this supposed to work with data()? I think it will not revalidate if you return a Response with the status code in the 400 range.

the comment on data() says "Create "responses" that contain status/headers without forcing

• serialization into an actual Response - used by Remix single fetch".

It doesn't matter. Neither returning data() nor Response.json() work.

[bradleylandis]

Returning responses is working for us. If we return response with status > 400 it does not revalidate. We upgraded from previous versions where it was opt in. But I think it is the default now.

[okalil]

I can still reproduce this bug in RR 7.3.0 with fetcher.Form

[brophdawg11]

I think this should be resolved by the refactor we did in #13253 and will be available in the next release

[github-actions]

🤖 Hello there,

We just published version 7.5.1-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 7.5.1 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!