Skip to content

Commit

Permalink
Revert "Support direct handlers in useSubmit/fetcher.submit/fetcher.l…
Browse files Browse the repository at this point in the history
…oad (#10362)"

This reverts commit 4357e37.
  • Loading branch information
brophdawg11 committed Apr 26, 2023
1 parent 5d45497 commit 4bb7e48
Show file tree
Hide file tree
Showing 10 changed files with 79 additions and 822 deletions.
61 changes: 0 additions & 61 deletions .changeset/direct-handlers-router.md

This file was deleted.

51 changes: 0 additions & 51 deletions .changeset/direct-handlers.md

This file was deleted.

22 changes: 0 additions & 22 deletions docs/hooks/use-fetcher.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,16 +108,6 @@ If you find yourself calling this function inside of click handlers, you can pro

<docs-info>Any `fetcher.load` calls that are active on the page will be re-executed as part of revalidation (either after a navigation submission, another fetcher submission, or a `useRevalidator()` call)</docs-info>

### Direct `loader` specification

If you want to perform a `fetcher.load`, but you don't want/need to create a route for your `loader`, you can pass a `loader` directly to `fetcher.load`:

```tsx
fetcher.load(() => {
// Custom loader implementation here
});
```

## `fetcher.submit()`

The imperative version of `<fetcher.Form>`. If a user interaction should initiate the fetch, you should use `<fetcher.Form>`. But if you, the programmer are initiating the fetch (not in response to a user clicking a button, etc.), then use this function.
Expand Down Expand Up @@ -149,18 +139,6 @@ If you want to submit to an index route, use the [`?index` param][indexsearchpar

If you find yourself calling this function inside of click handlers, you can probably simplify your code by using `<fetcher.Form>` instead.

### Direct `action` specification

If you want to perform a `fetcher.submit`, but you don't want/need to create a route for your `action`, you can pass an `action` directly to `fetcher.submit`:

```tsx
fetcher.submit(data, {
action({ payload }) {
// Custom action implementation here
},
});
```

## `fetcher.data`

The returned data from the loader or action is stored here. Once the data is set, it persists on the fetcher even through reloads and resubmissions.
Expand Down
14 changes: 1 addition & 13 deletions docs/hooks/use-submit.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ function action({ request, payload }) {

## Submit options

The second argument is a set of options that map (mostly) directly to form submission attributes:
The second argument is a set of options that map directly to form submission attributes:

```tsx
submit(null, {
Expand All @@ -136,16 +136,4 @@ submit(null, {
<Form action="/logout" method="post" />;
```

### Direct `action` specification

If you want to perform a submission, but you don't want/need to create a route for your `action`, you can pass an `action` to `useSubmit` which will perform a submission navigation to the current location but will use the provided `action`:

```tsx
submit(data, {
action({ request }) {
// Custom action implementation here
},
});
```

[pickingarouter]: ../routers/picking-a-router
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
},
"filesize": {
"packages/router/dist/router.umd.min.js": {
"none": "45.8 kB"
"none": "45 kB"
},
"packages/react-router/dist/react-router.production.min.js": {
"none": "13.1 kB"
Expand Down

0 comments on commit 4bb7e48

Please sign in to comment.