submit success handler?

[iway1]

Any way to run some code after a successful call to fetcher.submit(data)? Trying to show a toast whenever the request is successful and the only way I can figure out how to do it is checking the data in fetcher

[kiliman]

// imperative
useEffect(() => {
  if (fetcher.type === 'done') {
    showToast()
  }
}, [fetcher.type])

// declarative
{ fetcher.type === 'done' ? <Toast/> : null }

[iway1]

this is basically I did originally and isn't much different from checking the fetcher data.. it's very painful to have to do things this way.

Worth mentioning that the declarative method is not going to work well for situations where there are potentially multiple toasts being shown at once, and there wouldn't be a clean way to have the toast hide itself either. Although in general I think Toasts are one of the rare situations where imperative is a lot better than declarative .

Even the imperative method can cause unexpected behavior in cases where the fetcher is being called multiple times.

There should really just be a success handler :(

[kiliman]

You could just create a custom hook

function useFetcherHandler(handler: () => void) {
  const fetcher = useFetcher()
  useEffect(() => {
    if (fetcher.type === 'done') {
      handler()
    }
  }, [fetcher.type, handler])
  return fetcher
}

const fetcher = useFetcherHandler(() => showToast())

[iway1]

yeah that would be better - but it would still have the same issues and unfortunately in general it's more complex than just having a success handler