I never use <Form>

[tavoyne]

After using Remix for two years, I consistently choose useFetcher over <Form> despite Remix's guidance, as fetchers provide direct references to submission state. I find the distinction between navigating and non-navigating fetches inadequate.

More often than not, the navigating nature of an action is unpredictable. For example, an action might check if the user is signed in - redirecting to /sign-in if not (navigating) - before increasing a counter (non-navigating).

I believe the coexistence of both <Form> and useFetcher is unnecessary, as useFetcher's direct reference model provides a superior design. I suggest that <Form> be abandoned and its navigation optimizations be integrated into the fetcher API.

// Using Form - indirect state reference
// What if there's another form pointing to that url? Further narrow with formData, really?
<Form action="/submit">
  {navigation.formAction === "/submit" && <Spinner />}
</Form>

// Using fetcher - direct state reference
const fetcher = useFetcher()
<fetcher.Form action="/submit">
  {fetcher.state === "submitting" && <Spinner />}
</fetcher.Form>

Note: I was perfectly content with my approach until Remix silently removed the replace prop from <useFetcher.Form>, limiting history stack control.

[gustavopch]

If I understand correctly, with the new features from React v19 such as server functions and <form action>, all of <Form>, useSubmit(), useFetcher(), etc. can eventually be deprecated. 🤔

[akomm]

Similar to this consolidation maybe:
remix-run/react-router#12358