Future v7_fetcherPersist still unmounts before data revalidation is triggered

[brandonculverwork]

Reproduction

Create a component that has its own fetcher and unmounts itself, like a fetcher.submit on an object that deletes itself from a list upon resolution resulting in an unmount.
The request finishes, but data revalidation is not triggered. This is with navigation: false.

I can confirm this is the case by using an external fetcher and passing it into the component. It then works as expected.

Maybe this is intentional, but it feels a lot less usable in this kind of use case.

module.exports = {
  ignoredRouteFiles: ["**/.*"],
  serverModuleFormat: "cjs",
  serverPlatform: "node",
  tailwind: true,
  future: {
    v3_fetcherPersist: true,
  },
  };

System Info

System:
    OS: macOS 14.1.2
    CPU: (12) arm64 Apple M2 Pro
    Memory: 1.56 GB / 32.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.10.2 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 17.1.2
  npmPackages:
    @remix-run/css-bundle: 2.3.1 => 2.3.1
    @remix-run/dev: 2.3.1 => 2.3.1
    @remix-run/eslint-config: 2.3.1 => 2.3.1
    @remix-run/express: 2.3.1 => 2.3.1
    @remix-run/node: 2.3.1 => 2.3.1
    @remix-run/react: 2.3.1 => 2.3.1
    @remix-run/serve: 2.3.1 => 2.3.1

Used Package Manager

pnpm

Expected Behavior

The request would persist the fetcher and trigger data revalidation.

Actual Behavior

It does not trigger data revalidation like it normally would if not unmounted.

[brophdawg11]

This might be a bug with unmounting a fetcher while it's still in the submitting state. I'll take a look but for the time being if you delete when it reaches loading you can probably work around the issue:

function Component({ unmount }) {
  let fetcher = useFetcher();

  React.useEffect(() => {
    if (fetcher.state === "loading") {
      unmount();
    }
  }, [fetcher.state, unmount]);

  return (
    <>
      <button onClick={() => fetcher.submit({}, { method: "post" })}>
        Submit Fetcher
      </button>
      <pre>Fetcher state: {fetcher.state}</pre>
    </>
  );
}

[brophdawg11]

This is resolved by #11102. It missed the cutoff for React Router 6.21.0/Remix 2.4.0 so will be in the next release following those.

[github-actions]

🤖 Hello there,

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