react-async-await
Async component that waits on promises to resolve!
Motivation
Creating a promise is a synchronous action. If you hold a reference to a promise, you can eventually get the future value that it resolves to. Calling setState
asynchronously in a component can cause a lot of headaches because of race conditions. The promise could still be in a pending state when the component unmounts or the props change. The Async
component allows you to never worry about these race conditions and enables you to write your asynchronous react code as if it was synchronous.
Install
yarn add react-async-await react
ReactAsyncAwait
- ReactAsyncAwait
- ~Async ⇒
ReactElement
- ~createLoader(loader, [resolver]) ⇒
ReactComponent
- ~Async ⇒
ReactElement
ReactAsyncAwait~Async ⇒ Component that takes a promise and injects the render callback with the resolved value.
Kind: inner property of ReactAsyncAwait
Extends: ReactComponent
Param | Type | Description |
---|---|---|
props | object |
|
[props.await] | * |
|
[props.waiting] | function |
map promise to value |
[props.then] | function |
map result to value |
[props.catch] | function |
map error to value (default throws error) |
[props.children] | function |
render callback |
Example
;;; Component { this; } { this; } { if thispropsid !== nextPropsid this; } { this; } { return thisstateerror ? <div>Uncaught promise rejection: thisstateerrormessage</div> : <Async await=thisstatepromise>thispropschildren</Async> ; } ReactDOM;
ReactComponent
ReactAsyncAwait~createLoader(loader, [resolver]) ⇒ Create a wrapper component around Async
that maps props to a promise when the component mounts.
Kind: inner method of ReactAsyncAwait
Param | Type | Description |
---|---|---|
loader | function |
loader maps props to a promise |
[resolver] | function |
resolver maps props to a key |
Example
;;; const LoadUser = ; ReactDOM;
Example (memoized loader)
;;;// https://lodash.com/docs/4.17.5#memoize; const loader = ; const LoadUser = ; ReactDOM;