Gista.js

useFetcher is a React Router hook that lets you submit data to the server without navigating to a new page. The page stays where it is — only the data changes.

Form vs Fetcher

	`<Form>`	`useFetcher`
Submits data	Yes	Yes
Navigates	Yes — triggers a full page reload cycle	No — stays on the same page
Best for	Create → redirect (e.g., save a form, go to results)	In-place mutations (e.g., delete a row, toggle a setting)

When you need it

Think about deleting a submission from your results table. You don't want to leave the page — you want the row to disappear and everything else to stay put. That's what useFetcher does.

let fetcher = useFetcher()

<fetcher.Form method="post">
  <input type="hidden" name="verb" value="delete" />
  <input type="hidden" name="id" value={row.id} />
  <button type="submit">Delete</button>
</fetcher.Form>

The form submits to the same route's action. The action deletes the row. React Router automatically revalidates the page data, and the row disappears — no redirect, no page flash.

How it works

useFetcher creates a form that submits in the background
The route's action handles the submission like any other form
After the action completes, React Router reloads the page's data
The component re-renders with the updated data

The action code is the same whether the submission comes from <Form> or useFetcher. The only difference is what happens after — navigate or stay.