Revalidation triggers fetcher.submit to change

[kentcdodds]

What version of Remix are you using?

1.8.2

Steps to Reproduce

Open this: https://stackblitz.com/edit/node-ikzu57?file=app%2Froutes%2Findex.tsx

Open the browser console

Click "Set searchParams"

Observe the console shows that fetcher.submit has changed.

Expected Behavior

I expect fetcher.submit to be stable so I can safely use it in dependency arrays.

Actual Behavior

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.

[kentcdodds]

After further investigation, what's trigger fetcher.submit to change is the defaultAction dependency:

remix/packages/remix-react/components.tsx

Line 1260 in 8aacba3

let defaultAction = useFormAction();

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.

So, in order to ensure referential stability, we need to either:

1. allow the user to configure the action when calling useFetcher so we can ignore the defaultAction in that case (so it won't appear in the dependency array and therefore cannot change)
2. Or we need to use a "latest ref" pattern so we don't have to list the defaultAction in the dependency array.

I much prefer option 1 because it would actually be a really nice feature to have anyway. It would allow folks to change their code from something like this:

const fetcher = useFetcher()

// ...
<button onClick={() => fetcher.submit({hi: 'bob'}, {method: 'post', action: '/some-path'})}>Submit bob</button>

To this:

const fetcher = useFetcher({
  method: 'post',
  action: '/some-path',
})

// ...
<button onClick={() => fetcher.submit({hi: 'bob'})}>Submit bob</button>

I've seen some folks suggest they would actually prefer this API and I think I agree with them. Also, it would solve the problem of fetcher being referentially stable.

[brophdawg11]

This should be resolved by remix-run/react-router#10336 which makes fetcher.submit stable across location changes

[brophdawg11]

Should be available in Remix 1.16 once released