Skip to content

Instantly share code, notes, and snippets.

View petebrowne's full-sized avatar

Pete Browne petebrowne

View GitHub Profile

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();

Learn React (or other libs)

Let's get together and build a component in React each week. We can then check out each other's solutions to the challenge and hopefully get better at this development thing. While my goal is to get better at React, other libraries are also welcome. There is so much out there we can learn from.

This is not meant to be a tutorial. There are TONS of those for react already on the web. We are going to start with very simple components and work into more complex scenarios.