useTransition().type
does not expose done
value after successfull form submit, like fetcher.type
does
#9879
Replies: 8 comments 1 reply
-
@ryanflorence showed on the Roadmap planning LiveStream, potentially exploring something like this for a future API, which would eliminate the custom lightweight hooks I have around useSubmit and useFetcher // Timestamped discussion for API code below: https://youtu.be/eGWG22olL0o?t=1936
useFetcher({
onStart() {},
onError() {},
onSuccess() {},
onComplete() {},
}); That future API for References |
Beta Was this translation helpful? Give feedback.
-
Discord Thread
I need to dig into this more; regarding this thought from Ryan on useTransition:
More Thoughts 💭I'm curious why
Another idea?
I just wish there was an easier way to detect when a @kentcdodds @sergiodxa @brophdawg11 curious on your thoughts 🙏 |
Beta Was this translation helpful? Give feedback.
-
This feels like a proposal to change the current APIs to more closely align
This is where I land personally. I think |
Beta Was this translation helpful? Give feedback.
-
There's a handy "convert to discussion" action - but that may only be available to maintainers? If you don't see that let me know and I'll do it so you don't have to copy/paste everything over! |
Beta Was this translation helpful? Give feedback.
-
Hi @brophdawg11 - converting to a discussion sounds good 👍 I think its only available to maintainers - convert to discussion github docs Initially was curious if
|
Beta Was this translation helpful? Give feedback.
-
For anyone else who stumbles upon my example & code in the future, I just saw in the v1.10.0 Remix release notes |
Beta Was this translation helpful? Give feedback.
-
oh - |
Beta Was this translation helpful? Give feedback.
-
I'm also going to transfer this issue over to the react-router repository since all the |
Beta Was this translation helpful? Give feedback.
-
What version of Remix are you using?
1.9.0
Background Context
While creating my own custom hook to detect when useSubmit is done responding from the server, I found that
useTransition().type
doesnt expose adone
value, unlikefetcher.type
Expected Behavior
After calling useSubmit and successfully receiving a response back from the server, useTransition's
useTransition().state
value should beidle
and theuseTransition().type
value should bedone
, eventuallyActual Behavior
After calling
useSubmit()
and successfully receiving a response back from the server,useTransition.type
value does not get updated todone
to indicate inform our remix app that the form submission has successfully completed, insteaduseTransition.type === 'idle'
.Steps to Reproduce
Stackblitz URL: https://stackblitz.com/edit/node-s1xxwy?file=package.json,app%2Froutes%2Findex.tsx
Testing
useSubmit
getData
button inside theChild1Component
containerconsole.log
's, you'll see thattranstion.type
will never have adone
valueTesting
useFetcher
getData
button inside theChild2Component
containerconsole.log
's, you'll see thattranstion.type
will never have adone
valueVideo Reproduction
useSubmit--vs--useFetcher---type-value.mp4
Why is
useTransition().type === 'done'
important?1.Currently
fetcher.type
exposesdone
after a full form submission has completed:https://github.com/remix-run/remix/blob/main/packages/remix-react/transition.ts#L121-L247
2.Having a
done
state is useful in user land, as it allows use to tap into when a submission completed from the backend.For example, you can use
fetcher.type === 'done'
to trigger anonSuccess
oronError
callback in your code and show a Toast to the user after the server has responded successfully or with an error.I created a custom lightweight hook around
useFetcher
calleduseRemixFetcher
which allows a user specifyonSuccess
andonError
callbacks like this & I usefetcher.type === 'done'
to know when my submission has completed in order to fire my callbacks.Currently it's more complicated to detect when a useSubmit has completed due to
done
not being exposed totransition.type
Stackblitz URL: https://stackblitz.com/edit/node-s1xxwy?file=package.json,app%2Froutes%2Findex.tsxFollow up questions
I'm aware that
useTransition
is a global singleton whereas useFetcher's are completely independent of other useFetcher's1.I was curious if this omission of
done
onuseTransition
is intentional?2.I think we should expose it to
TransitionStates
just like how its exposed in useFetcher'sFetcherStates
typeBeta Was this translation helpful? Give feedback.
All reactions