Function useAsyncCallback

src/hooks/useAsyncCallback.ts:36–98

(
	callback: ( ...args: A ) => Promise<R>
)

 * ```
 */
export const useAsyncCallback = <A extends Array<unknown>, R>(
	callback: ( ...args: A ) => Promise<R>
): AsyncCallbackHookResult<A, R> => {
	// The state of the asynchronous callback.
	const [ asyncState, setAsyncState ] = useState<AsyncCallbackState<R>>( {
		status: 'idle'
	} );

	// A reference to the mounted state of the component.
	const unmountedRef = useIsUnmountedRef();

	// A reference to the previous execution UUID. It is used to prevent race conditions between multiple executions
	// of the asynchronous function. If the UUID of the current execution is different than the UUID of the previous
	// execution, the state is not updated.
	const prevExecutionUIDRef = useRef<string | null>( null );

	// The asynchronous executor function, which is a wrapped version of the original callback.
	const asyncExecutor = useRefSafeCallback( async ( ...args: A ) => {
		if ( unmountedRef.current || isSSR() ) {
			return null;
		}

		const currentExecutionUUID = uid();
		prevExecutionUIDRef.current = currentExecutionUUID;

		try {
			// Prevent unnecessary state updates, keep loading state if the status is already 'loading'.
			if ( asyncState.status !== 'loading' ) {
				setAsyncState( {
					status: 'loading'
				} );
			}

			// Execute the asynchronous function.
			const result = await callback( ...args );

			// Update the state if the component is still mounted and the execution UUID matches the previous one, otherwise
			// ignore the result and keep the previous state.
			if ( !unmountedRef.current && prevExecutionUIDRef.current === currentExecutionUUID ) {
				setAsyncState( {
					status: 'success',
					data: result
				} );
			}

			return result;
		} catch ( error: any ) {
			console.error( error );

			// Update the state if the component is still mounted and the execution UUID matches the previous one, otherwise
			if ( !unmountedRef.current && prevExecutionUIDRef.current === currentExecutionUUID ) {
				setAsyncState( {
					status: 'error',
					error
				} );
			}
		}