useAsync(options)
, or as props to <Async {...options}>
and custom instances.useFetch
additionally takes these options:promise
Promise
startedAt
to the time promise
was first provided. Changing the value of promise
will cancel any pending promise and listen to the new one. If promise
is initially undefined, the React Async state will be pending
.Note thatreload
will not do anything when usingpromise
. UsepromiseFn
instead.
promiseFn
function(props: Object, controller: AbortController): Promise
componentDidMount
and componentDidUpdate
. The function receives all component props (or options) and an AbortController instance as arguments.Be aware that updatingpromiseFn
will trigger it to cancel any pending promise and load the new promise. Passing an inline (arrow) function will cause it to change and reload on every render of the parent component. You can avoid this by defining thepromiseFn
value outside of the render method. If you need to pass variables to thepromiseFn
, pass them as additional props to<Async>
, aspromiseFn
will be invoked with these props. Alternatively you can useuseCallback
or memoize-one to avoid unnecessary updates.
deferFn
function(args: any[], props: Object, controller: AbortController): Promise
run(...args)
. Any arguments to run
are passed-through as an array via args
, so you can pass data through either args
or props
, as needed. The deferFn
is commonly used to send data to the server following a user action, such as submitting a form. You can use this in conjunction with promiseFn
to fill the form with existing data, then updating it on submit with deferFn
.Be aware that when using bothpromiseFn
anddeferFn
, the shape of their fulfilled value should match, because they both update the samedata
.
watch
any
componentDidUpdate
and re-runs the promiseFn
when the value changes, using a simple reference check (oldValue !== newValue
). If you need a more complex update check, use watchFn
instead.watchFn
function(props: Object, prevProps: Object): boolean | any
promiseFn
when this callback returns truthy (called on every update). Any default props specified by createInstance
are available too.initialValue
any | Error
data
or error
(if instance of Error); useful for server-side rendering. When an initialValue
is provided, the promiseFn
will not be invoked on first render. Instead, status
will be immediately set to fulfilled
or rejected
and your components will render accordingly. If you want to trigger the promiseFn
regardless, you can call reload()
or use the watch
or watchFn
option.Note thatonResolve
oronReject
is not invoked in this case and nopromise
prop will be created.
onResolve
function(data: any): void
onReject
function(reason: Error): void
onCancel
function(): void
cancel()
or automatically due to props changes or unmounting.reducer
function(state: any, action: Object, internalReducer: function(state: any, action: Object))
This is a power feature which loosely follows the state reducer pattern. It allows you to control state changes by intercepting actions before they are handled, or by overriding or enhancing the reducer itself.
dispatcher
function(action: Object, internalDispatch: function(action: Object), props: Object)
This is a power feature similar to the state reducer pattern. It allows you to control state changes by intercepting actions before they are dispatched, to dispatch additional actions, possibly later in time.
debugLabel
string
useDebugValue
) and React Async DevTools.suspense
boolean
<IfPending>
. Suspense differs in 2 main ways:<Suspense>
should be an ancestor of your Async component, instead of a descendant. It can be anywhere up in the<Suspense>
wrap multiple Async components, in which case it will render the fallback UI untilNote that the way Suspense is integrated right now may change. Until Suspense for data fetching is officially released, we may make breaking changes to its integration in React Async in a minor or patch release. Among other things, we'll probably add a cache of sorts.
defer
boolean
deferFn
if true
, or enables the use of promiseFn
if false
. By default this is automatically chosen based on the request method (deferFn
for POST / PUT / PATCH / DELETE, promiseFn
otherwise).json
boolean
Accept
header is set to "application/json"
.