useAsyncFn - deps parameter should be required

[joakimgunst]

The second parameter in the useAsyncFn is a dependency array and it is currently optional with a default value of [], which is passed on to useCallback internally. An empty array means that the callback function is memoized and never updated.

This is unexpected because it doesn't match how native React hooks work, e.g. in useMemo an undefined dependency array causes the value to be recomputed on every render, and in useEffect an undefined array causes the effect to fire on every render. Both of these are different from an empty array.

I think it would be safer to make the second parameter required, which would match how useCallback works. This is a breaking change so maybe not so easy to do, but hopefully it could still be fixed at some point.

[fnune]

Current workaround:

import React from "react";
import "react-use";
import { AsyncFnReturn, AsyncState } from "react-use/lib/useAsyncFn";
import { FnReturningPromise, PromiseType } from "react-use/lib/util";

declare module "react-use" {
    export type StateFromFnReturningPromise<
        T extends FnReturningPromise
    > = AsyncState<PromiseType<ReturnType<T>>>;

    /**
     * Please add a dependencies array. The weird `never` return type is there
     * to ban usage of this hook without a dependencies array.
     */
    export function useAsyncFn(
        fn: unknown,
        deps?: undefined,
        initialState?: unknown
    ): never;
    export function useAsyncFn<T extends FnReturningPromise>(
        fn: T,
        deps: React.DependencyList,
        initialState?: StateFromFnReturningPromise<T>
    ): AsyncFnReturn<T>;

    /**
     * Please add a dependencies array. The weird `never` return type is there
     * to ban usage of this hook without a dependencies array.
     */
    export function useAsync(fn: unknown, deps?: undefined): never;
    export function useAsync<T extends FnReturningPromise>(
        fn: T,
        deps: React.DependencyList
    ): AsyncState<PromiseType<ReturnType<T>>>;
}

Augmenting a module declaration with a function adds an overload, so it's necessary to ban the signatures you don't want.

[JoeDuncko]

Hi! @react-hookz/web, the new library by one of react-use's former maintainers (background here and here) has a new implementation of useAsyncFn called useAsync that solves this issue.

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

Hope this helps!