Avoid memory leak when using React useState API with async function. Fix `Warning: Can't perform a React state update on an unmounted component.`

useSafeState.ts

/**
 * useSafeState
 * - To avoid memory leak when setState called after unmounted
 * @param defaultValue
 */
export function useSafeState<T>(defaultValue?: T): [T, React.Dispatch<React.SetStateAction<T>>] {
    let isMounted = true;
    React.useEffect(() => () => {
        isMounted = false;
    }, []);

    const [state, setState] = React.useState<T>(defaultValue as T);
    const safelySetState = (x: React.SetStateAction<T>) => {
        if (!isMounted) return;
        setState(x);
    };

    return [state, safelySetState];
}

  

Since React.useState doesn't care component's mounted state, useSafeState can be helpful to avoid memory leak.

Related issue: facebook/react#14369
Warning: Can't perform a React state update on an unmounted component.