@wbe/use-async-effect

Execute effect with promise in React functional component. This hook is a simple wrapper of useEffect.

Installation

$ npm install -s @wbe/use-async-effect

How to use

useAsyncEffect

import { useAsyncEffect } from "@wbe/use-async-effect";

function App() {
  useAsyncEffect(async () => {
    new Promise(resolve =>
        // do something...
        resolve();
    );
  });
}

Like useEffect from React, useLayoutEffect can take dependencies array as second argument.

const [isResolved, setIsResolved] = useState(false);

useAsyncEffect(async () => {
  new Promise(resolve =>
    // do something...
    resolve();
  );
}, [isResolved]);

useAsyncLayoutEffect

This is exactly the same effect except useAsyncLayoutEffect is a wrapper of useLayoutEffect React hook.

import { useAsyncLayoutEffect } from "@wbe/use-async-effect";

function App() {
  useAsyncLayoutEffect(async () => {
    new Promise(resolve =>
        // do something...
        resolve();
    );
  });
}

Parameters

params	type	description	default value
pEffect	()=> void	function returns effect to execute	/
pInputs	any[]	dependencies array of argument(s) allowing to re-suscribre to the effect	/