If the useFetcher() dismounts before the action finishes, it does NOT follow redirects

[willhoney7]

Reproduction

https://stackblitz.com/edit/fetcher-unmount-redirect-bug?file=app%2Froutes%2Ftabs.tsx,app%2Froutes%2Fclose.tsx

If you look at the tabs page, there are a list of "tab" components. Each tab component has a useFetcher call inside. If you click the "close" button on a tab component, it submits a slow action which ends with a thrown redirect response.

If the tab component (with the useFetcher call) UNMOUNTS before the action finishes, the redirect WILL NOT HAPPEN.

note: I tried adding fetcher keys but it still doesn't follow redirects

System Info

System:
    OS: macOS 15.6
    CPU: (16) arm64 Apple M3 Max
    Memory: 74.23 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 10.14.0 - /opt/homebrew/bin/pnpm
    Watchman: 2025.06.30.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 139.1.81.135
    Chrome: 139.0.7258.139
    Safari: 18.6
  npmPackages:
    @react-router/dev: ^7.8.1 => 7.8.1
    @react-router/node: ^7.8.1 => 7.8.1
    @react-router/remix-routes-option-adapter: ^7.8.1 => 7.8.1
    @react-router/serve: ^7.8.1 => 7.8.1
    react-router: ^7.8.1 => 7.8.1
    vite: ^6.3.5 => 6.3.5

Used Package Manager

npm

Expected Behavior

I would expect all redirects to be followed, even if the fetcher unmounts. We're building an optimistic UI and trying to give instant feedback when something is closed.

Actual Behavior

If the tab component (with the useFetcher call) UNMOUNTS before the action finishes, the redirect WILL NOT HAPPEN. If your fetcher stays mounted, it WILL follow the redirect. So the behavior here is inconsistent.

[brophdawg11]

This is expected behavior, just not ideal for what you're trying to do here. When a fetcher unmounts and is deleted (there are no other active fetchers with the same key) we no longer bubble errors or process redirects from pending calls. The unmounting of the UI usually means the user has gone onto a new portion of UI - and we don't want to take them away from that because of a lingering call from the last thing they were doing.

If we did, then this behavior would be incredibly unintuitive and annoying for users because if they navigated anywhere while the fetcher submission was in flight, they'd land there and immediately be redirected away when the fetcher completed. Or if the fetcher errored, they'd land on their new location and then have an error boundary pop up.

The usual recommendation here is to lift the fetcher and pass it in as a prop so when the component unmounts the fetcher doesn't, but that doesn't work if you have a dynamic number of tabs since you can't create a dynamic number of fetchers with the rules of hooks.

I would try just hiding the tab instead of unmounting it during your optimistic UI window

[willhoney7]

Appreciate the response here! That makes sense.