[Bug]: keep fetcher stable on location changes

[kentcdodds]

What version of React Router are you using?

https://stackblitz.com/edit/github-gr13fk?file=src%2Fmain.tsx

Steps to Reproduce

Click the button and see the error

Expected Behavior

The useEffect should not run after changing the search params

Actual Behavior

The fetcher changes when the location changes due to the submitter changing.

Basically, due to the defaultAction changing and that being included in the dependency array, it causes the submit callback to be changed.

I cannot use fetcher.submit in a dependency array because any time there's a revalidation on the page, all fetcher.submits are new instances of the submit function. This impacts any situation you want to use fetcher in a dependency array as well.

After further investigation, what's trigger fetcher.submit to change is the defaultAction dependency: https://github.com/remix-run/remix/blob/8aacba3c4cd23e63ef57a8cb7b68c9d6c88bdb6e/packages/remix-react/components.tsx#L1260 (at least that's what it is in Remix, probably similar in react router).

So, what's happening, is I make a change to the URLSearchParams, that triggers the defaultAction to change which invalidates the submit on the fetcher which triggers my useEffect again.

In my case, I don't care about the defaultAction because I specify one when I call submit.

Originally discussed in #9737

[brophdawg11]

Related comment for stabilizing useNavigate: #7634 (comment)

[brophdawg11]

Fixed by #10336

[brophdawg11]

Reopening until this is released to npm

[brophdawg11]

Aligning with Remix here - will close this issue with awaiting release. This will be available when React Router 6.11 is released.

[github-actions]

🤖 Hello there,

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