Remix's useFetcher
doesn't return a Promise for any of its methods (like fetcher.submit()
) because Remix doesn't want you to explicitly await
anything so they can handle things like cancellation for you. Instead, they recommend adding a useEffect
and performing whatever logic you need to after the fetcher is in a particular state.
I found using an effect to run some logic after a submission to be too indirect, and there seem to be plenty of cases where you want to submit a form and then perform some other work on the client (sometimes async, like requesting the user's permission for their location), and I'd rather just do that after a submission in the event handler rather than an effect.
So here's a proof of concept hook that wraps Remix's useFetcher
and returns a version of submit
that is a promise, and resolves with the data from the action:
function useFetcherWithPromise() {
let resolveRef = useRef();
let promiseRef = useRef();