[useAsyncFn] Returning an error is "handling" the error

[avioli]

I'm not sure the return line is doing the correct thing, but that might be the intended behaviour.

react-use/src/useAsyncFn.ts

Lines 50 to 54 in bb4a5cb

	(error) => {
	isMounted() && callId === lastCallId.current && set({ error, loading: false });
	return error;
	}

Returning anything other than a Promise.reject(...) from a catch() results in "handling" the error, thus resolving the promise successfully... with the returned value.

That line should either throw error or return a Promise.reject(error).

Given that there are no issues about it so far, I'm guessing current state is a ok. Feel free to close if so.

[Mookiepiece]

same problem, but I found #612

[avioli]

I don't know how I missed that issue?

I think the right thing to do is to not return anything or return a new Promise, which will resolve with no result after the original is fulfilled, be it rejecting or resolving. This way the point of the useAsync promise is not to give you a result (error or not), but to let your code await for it to finish.

The whole point of useAsync is to give you the new state of the promise on each re-render, so you can react to those using hooks. So in essence you should not be awaiting on it.

[Mookiepiece]

That would be type friendly.

I thought useAsyncFn would decotate my fn, but It returns a trigger instead of a superFn. I just accept that and create my own.

[avioli]

Nah... I see the main point of hooks as state holders + mutators (most often).

useAsyncFn is no different - a state holder for the promise' state and result (be it an error or not) and a trigger, which initiates the whole process of mutation of said state.

The beauty of hooks is that they (mostly) are short and one can read their source code and see how they work.

[vikitaoshunyi]

you can return Promise.reject(Promise.reject('error')); looks like this

const [{ value: tableData }, fetchFunc] = useAsyncFn(async query => {
  const [err, res] = await getData(query);
  if (err) {
    return Promise.reject(Promise.reject('error'));
  }
  return res;
});
...
const onClick = () => {
  fetchFunc()
    .then(res => {
      console.log(res);
    })
    .catch(e => {
      console.log(e);
    });
}

[JoeDuncko]

Hi all! @react-hookz/web, the new library by one of react-use's former maintainers (background here and here) has implemented a useAsync hook that is much more ergonomic and typescript friendly. You might want to check it out!

For those interested, there's an official migration guide for migrating from react-use to @react-hookz/web.

Hope this helps!