🏃 Asynchronous side effects, without the nonsense.

useAsyncEffect ( async ( ) => { await doSomethingAsync ( ) ; } ) ;

Installation

npm install use-async-effect

or

yarn add use-async-effect

This package ships with TypeScript and Flow types.

API

The API is the same as React's useEffect() , except for some notable differences:

The destroy function is passed as an optional second argument:

useAsyncEffect ( callback , dependencies ? ) ; useAsyncEffect ( callback , onDestroy , dependencies ? ) ;

The async callback will receive a single function to check whether the component is still mounted:

useAsyncEffect ( async isMounted => { const data1 = await fn1 ( ) ; if ( ! isMounted ( ) ) return ; const data2 = await fn2 ( ) ; if ( ! isMounted ( ) ) return ; doSomething ( data1 , data2 ) ; } ) ;

Examples

Basic mount/unmount

useAsyncEffect ( async ( ) => console . log ( ' mount ' ) , ( ) => console . log ( ' unmount ' ) , [ ] ) ;

Omitting destroy

useAsyncEffect ( async ( ) => console . log ( ' mount ' ) , [ ] ) ;

Handle effect result in destroy

useAsyncEffect ( ( ) => fetch ( ' url ' ) , ( result ) => console . log ( result ) ) ;

Making sure it's still mounted before updating component state