React Router Data Mode

# Actions and Form Handling

Actions handle data mutations (create, update, delete). After an action completes, all loaders on the page automatically revalidate.

## Choosing the Right Pattern

| Use Case                     | Pattern                | Why                                |
| ---------------------------- | ---------------------- | ---------------------------------- |
| Search/filter forms          | `<Form method="get">`  | Auto-updates URL search params     |
| Mutations that navigate      | `<Form method="post">` | Creates, then redirects            |
| Mutations without navigation | `useFetcher`           | Ratings, likes, inline edits       |
| Multiple mutations on page   | `useFetcher`           | Each fetcher has independent state |

**Default to `useFetcher` for mutations** - it provides smoother UX with optimistic updates and no page reload.

## Anti-Patterns to Avoid

```tsx
// ❌ DON'T: Manual form handling for search
function SearchForm() {
  const [searchParams, setSearchParams] = useSearchParams();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    setSearchParams({ q: formData.get("q") as string });
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="q" />
      <button type="submit">Search</button>
    </form>
  );
}

// ✅ DO: Use Form with method="get" - handles search params automatically
function SearchForm() {
  return (
    <Form method="get">
      <input name="q" />
      <button type="submit">Search</button>
    </Form>
  );
}
```

```tsx
// ❌ DON'T: Use Form for inline mutations (causes full navigation)
function RatingButton({ itemId }) {
  return (
    <Form method="post" action={`/items/${itemId}/rate`}>
      <button>Rate</button>
    </Form>
  );
}

// ✅ DO: Use useFetcher for inline mutations (no navigation, smoother UX)
function RatingButton({ itemId, currentRating }) {
  const fetcher = useFetcher();

  // Optimistic UI - show expected state immediately
  const optimisticRating = fetcher.formData
    ? Number(fetcher.formData.get("rating"))
    : currentRating;

  return (
    <fetcher.Form method="post" action={`/items/${itemId}/rate`}>
      <input type="hidden" name="rating" value={optimisticRating + 1} />
      <button>⭐ {optimisticRating}</button>
    </fetcher.Form>
  );
}
```

---

## Defining Actions on Routes

Actions are defined on route objects and handle form submissions:

```tsx
import { redirect } from "react-router";

const router = createBrowserRouter([
  {
    path: "/projects/new",
    action: async ({ request }) => {
      const formData = await request.formData();
      const title = formData.get("title");

      const project = await db.createProject({ title });

      return redirect(`/projects/${project.id}`);
    },
    Component: NewProject,
  },
]);
```

### Action Arguments

- `request` - The Fetch Request object with form data
- `params` - URL parameters from dynamic segments

```tsx
{
  path: "/projects/:projectId",
  action: async ({ request, params }) => {
    const formData = await request.formData();
    await db.updateProject(params.projectId, {
      title: formData.get("title"),
    });
    return { success: true };
  },
  Component: EditProject,
}
```

---

## Search Forms with GET

`<Form method="get">` automatically serializes inputs to URL search params:

```tsx
import { Form, useSearchParams, useLoaderData } from "react-router";

const router = createBrowserRouter([
  {
    path: "/search",
    loader: async ({ request }) => {
      const url = new URL(request.url);
      const query = url.searchParams.get("q") ?? "";
      return { results: await search(query) };
    },
    Component: SearchPage,
  },
]);

function SearchPage() {
  const [