useAsync
hook, the <Async>
component and the createInstance
factory function. Each has its unique benefits and downsides.useAsync
hook (available from React v16.8.0) offers direct access to React Async's core functionality from within your own function components:Using helper components can greatly improve readability of your render functions by not having to write all those conditional returns.
useFetch
useAsync
, there's a dedicated useFetch
hook for it:useFetch
takes the same arguments as fetch itself, as well as options
to the underlying useAsync
hook. The options
object takes two special boolean properties: defer
and json
. These can be used to switch between deferFn
and promiseFn
, and enable JSON parsing. By default useFetch
automatically uses promiseFn
or deferFn
based on the request method (deferFn
for POST / PUT / PATCH / DELETE) and handles JSON parsing if the Accept
header is set to "application/json"
.<Async>
directly in your JSX component tree, leveraging the render props pattern:Using helper components can greatly improve readability of your render functions by not having to write all those conditional returns.
onResolve
and onReject
callbacks.useAsync
by passing in the state, or with <Async>
by using Context. Each of these components simply enables or disables rendering of its children based on the current state.<Async>
<Async>
. In this case you won't have to pass the state object, instead it will be automatically provided through Context.