Fetcher with key not resetting when key changes

[jahvi]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Consider the following route:

app/routes/$id.tsx

import { Link, useParams } from '@remix-run/react';
import { useFetcher } from '@remix-run/react';

export const action = () => {
  return json({ test: 'This is action data' });
};

export default function Page() {
  const params = useParams();
  const fetcher = useFetcher({
    key: params.id,
  });

  return (
    <div>
      <h1>Fetcher Key: {params.id}</h1>

      {fetcher.data ? (
        <>
          <p>This shouldn't show on route change:</p>
          <pre>{JSON.stringify(fetcher.data)}</pre>
        </>
      ) : null}

      <fetcher.Form method="POST">
        <button>Submit then click "Link"</button>
      </fetcher.Form>

      <Link to="../test">Link</Link>
    </div>
  );
}

Demo: https://stackblitz.com/edit/remix-run-remix-gt3qmm?file=app%2Froutes%2F_index.tsx,app%2Froutes%2F%24id.tsx

Expected Behavior

Fetcher data should be undefined

Actual Behavior

Fetcher data does not change

[brophdawg11]

Fixed by #11008 - will be available in the next release

[github-actions]

🤖 Hello there,

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