Add reset function to useFetcher object to support modal usage

[cblauvelt]

I am using useFetcher to submit form data without navigation within a modal. When a user submits data within the modal and closes the modal I would like clear the fetcher state so when the user re-opens the modal they get the same experience as the first usage.

I can work around this by rendering the modal only when needed which mounts and unmounts the modal component but this seems sub-optimal. Ex:

{modalOpen ? (<ModalComponent />) : null }

See discussion at remix-run/remix#2749.

[brophdawg11]

Yep - I'm on board. @jacob-ebey and I actually almost shipped this as part of v7 so we can dust that off. At the time we were (probably needlessly) waffling on whether we needed reset or abort or both etc.

Let's just ship fetcher.reset() which will abort any in-flight calls. If a standalone abort mechanism ever becomes super necessary we can revisit fetcher.abort. But in the meantime they can accomplish that with fetcher.reset and syncing state.

[jacob-ebey]

👍

[cblauvelt]

Sounds great. Will this issue show when it's merged into main or a development branch?

[brophdawg11]

Not here automatically - you can follow #14207. We usually try to add a comment on the discussion manually but the issue will be the most reliable thing to track.

[brophdawg11]

Issue: #14207
PR: #14206

[brophdawg11]

If anyone wants to do some alpha testing, this API is now available in 0.0.0-experimental-7ed11be 🙌

[brophdawg11]

Thanks to the folks below for doing some testing! I forgot to drop this her, but this API shipped as unstable_reset in 7.9.2.

[bravo-kernel]

Late to the party but this seems to work (perfect) for my use case.

useFormFieldEmptied(searchValue, () => fetcher.unstable_reset());

Much appreciated folks 💖

[AndreSilva1993]

Just tested as well and it works beautifully. Thanks for shipping this!

[brookslybrand]

Much love for this feature. Thanks @brophdawg11!

Previously, to accomplish this little UX I'd have to pull in useState and keep another state in sync.

fetcher-reset.mov

Now I can just do this:

onChange={() => {
  if (isSuccess) {
    fetcher.unstable_reset();
  }
}}

[brophdawg11]

Closing - this shipped as unstable in 7.9.2 and stabilized in 7.10.0

[estenp]

Does anyone know when and how the API docs get updated? They appear to be a typedoc site - shouldn't it be up to date with the API's in the latest version? Or am I looking in the wrong place?

https://api.reactrouter.com/v7/types/react_router.FetcherWithComponents.html

[brophdawg11]

oops - yeah these are unfortunately still a manual process and it looks like we're a bit stale. I'll get that updated (and hopefully automated 😄 )

Until then, if you want to see the latest, you can clone the react-router repo and run pnpm i; pnpm builld; pnpm run docs; and the docs will be generated in public/dev/

[brophdawg11]

this is now updated and automated going forward 👍

[brophdawg11]

The updated version of typedoc made a small change to file paths, so the above URL is now https://api.reactrouter.com/v7/types/react-router.FetcherWithComponents.html

[bravo-kernel]

#heromaterial 💖