@etsoo/react/lib/mjs/uses/useAsyncState.js

TypeScript ReactJs UI Independent Framework

import React from "react";
/**
 * Returns a stateful value, and a async function to update it.
 * @param initialState initial stat
 * @returns Current state and update action
 */
export function useAsyncState(initialState) {
    // State
    const [state, setState] = React.useState(initialState);
    // Resolve sate
    const resolveState = React.useRef(null);
    // Is mounted or not
    const isMounted = React.useRef(false);
    React.useEffect(() => {
        isMounted.current = true;
        return () => {
            isMounted.current = false;
        };
    }, []);
    // When state update
    React.useEffect(() => {
        if (resolveState.current) {
            resolveState.current(state);
        }
    }, [state]);
    const setAsyncState = React.useCallback((newState) => new Promise((resolve) => {
        if (isMounted.current) {
            resolveState.current = resolve;
            setState(newState);
        }
    }), []);
    return [state, setAsyncState];
}