/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, {}) })) : _createMdxContent(); function _createMdxContent() { const _components = Object.assign({ p: "p", ul: "ul", li: "li", em: "em", code: "code", h2: "h2", pre: "pre" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "This can be used in two distinct modes:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.em, { children: "manual" }), " (", _jsx(_components.code, { children: "useAsync.MANUAL" }), ") - the function is only triggered explicitly"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.em, { children: "automatic" }), " (", _jsx(_components.code, { children: "useAsync.DEEP" }), " or ", _jsx(_components.code, { children: "useAsync.SHALLOW" }), ") - the function is triggered initially\nand then automatically when argument values change (using a shallow or deep comparison)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["For mutations you usually want ", _jsx(_components.em, { children: "manual" }), " as it is triggered in response to some user action\nlike pressing a button."] }), "\n", _jsxs(_components.p, { children: ["For data fetching you usually want ", _jsx(_components.em, { children: "automatic" }), " mode as you retrieve some data\ninitially and then refetch it when some arguments change (eg. the id for a single\nrecord or the filters for a list)."] }), "\n", _jsx(_components.h2, { children: "Examples" }), "\n", _jsx(_components.p, { children: "Fetch and render a specified github profile" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "function FollowerCount() {\n const [user, setUser] = React.useState(\"octocat\")\n const { result, isLoading, error, run, reset } = useAsync(\n () => getGithubUser(user)\n )\n return (\n

\n setUser(e.target.value)}\n />\n

\n \n Query follower count\n \n \n

\n {result && (\n

\n \n
\n {result.name} has {result.followers} followers\n

\n )}\n {error && (\n

\n Failed with status: {error.status}{\" \"}\n {error.statusText}\n

\n )}\n

\n )\n}\n// we don't define this inside FollowerCount() because that will create a new function on\n// every render, causing useAsync() to re-run and triggering an infinite render loop\nfunction getGithubUser(user) {\n return fetch(`https://api.github.com/users/${user}`).then(\n (r) => {\n if (r.ok) {\n return r.json()\n }\n throw r\n }\n )\n}\n\n" }) })] }); } } return { default: MDXContent };

	Argument	Type
*	fn
	options An object with the properties below
	options.args	any[]
	options.onError
	options.onSuccess
	options.trigger	"MANUAL"\|"DEEP"\|"SHALLOW"

An object with these properties:
	Property	Type	Description
*	error	ErrorT\|null
*	isLoading	boolean
*	reset
*	response	ResultT\|null	Deprecated:
*	result	ResultT\|null
*	run

On this page

Arguments: