{"id":15007641,"url":"https://github.com/charlesstover/use-async-function","last_synced_at":"2025-10-03T15:31:03.888Z","repository":{"id":55738921,"uuid":"208545995","full_name":"CharlesStover/use-async-function","owner":"CharlesStover","description":"A React hook for integrating asynchronous function state into React function component state.","archived":true,"fork":false,"pushed_at":"2020-12-12T18:46:08.000Z","size":1058,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T02:17:20.801Z","etag":null,"topics":["javascript","js","npm","npm-module","npm-package","npmjs","react","react-hook","react-hooks","reactjs","ts","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-async-function","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CharlesStover.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-15T05:18:45.000Z","updated_at":"2024-02-26T08:23:49.000Z","dependencies_parsed_at":"2022-08-15T06:40:42.149Z","dependency_job_id":null,"html_url":"https://github.com/CharlesStover/use-async-function","commit_stats":null,"previous_names":["quisido/use-async-function","charlesstover/use-async-function"],"tags_count":0,"template":false,"template_full_name":"CharlesStover/node-package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Fuse-async-function","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Fuse-async-function/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Fuse-async-function/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlesStover%2Fuse-async-function/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlesStover","download_url":"https://codeload.github.com/CharlesStover/use-async-function/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235146592,"owners_count":18943285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","js","npm","npm-module","npm-package","npmjs","react","react-hook","react-hooks","reactjs","ts","typescript"],"created_at":"2024-09-24T19:12:58.018Z","updated_at":"2025-10-03T15:30:58.342Z","avatar_url":"https://github.com/CharlesStover.png","language":"TypeScript","readme":"# useAsyncFunction [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=useAsyncFunction%20integrates%20your%20asynchronous%20function%20state%20with%20a%20React%20component's%20local%20state.\u0026url=https://github.com/CharlesStover/use-async-function\u0026via=CharlesStover\u0026hashtags=react,reactjs,javascript,typescript,webdev,webdevelopment) [![version](https://img.shields.io/npm/v/use-async-function.svg)](https://www.npmjs.com/package/use-async-function) [![minzipped size](https://img.shields.io/bundlephobia/minzip/use-async-function.svg)](https://www.npmjs.com/package/use-async-function) [![downloads](https://img.shields.io/npm/dt/use-async-function.svg)](https://www.npmjs.com/package/use-async-function) [![build](https://api.travis-ci.com/CharlesStover/use-async-function.svg)](https://travis-ci.com/CharlesStover/use-async-function/)\n\n`useAsyncFunction` is a React hook that integrates an asynchronous function's\nstate with a React function component's state. This automates the process of\nre-rendering the React function component as the asynchronous function's state\nchanges between pending, resolved, and rejected.\n\n## Install\n\n- `npm i use-async-function` or\n- `yarn add use-async-function`\n\n## Use\n\n```javascript\nimport useAsyncFunction, { State } from 'use-async-function';\n\nconst myAsyncFunction = async (): Promise\u003cvoid\u003e =\u003e {\n  await one();\n  await two();\n  return 'three';\n};\n\nfunction MyComponent() {\n  const dispatch = useAsyncFunction(myAsyncFunction);\n\n  if (!dispatch.state) {\n    dispatch();\n  }\n\n  if (dispatch.state === State.Fulfilled) {\n    return \u003cdiv\u003eThe response was {dispatch.value}.\u003c/div\u003e;\n  }\n\n  if (dispatch.state === State.Rejected) {\n    return \u003cdiv\u003eAn error occurred: {dispatch.error}\u003c/div\u003e;\n  }\n\n  // Pending and uninitiated.\n  return \u003cLoading /\u003e;\n}\n```\n\n## Parameters\n\n### useAsyncFunction(Function)\n\nThe first parameter of the `useAsyncFunction` hook is the asynchronous function\nitself.\n\n### useAsyncFunction(Function, Options)\n\nIf you are not using an [identity reducer](#identity-reducer), the second\nparameter of the `useAsyncFunction` hook is the [options](#options) object.\n\n### useAsyncFunction(Function, Reducer)\n\nIf you are using an [identity reducer](#identity-reducer), the second parameter\nof the `useAsyncFunction` hook is the identity reducer.\n\n### useAsyncFunction(Function, Reducer, Options)\n\nIf you are using both an [identity reducer](#identity-reducer) and an\n[options](#options) object, the identity reducer is the second parameter of the\n`useAsyncFunction` hook, and the options object is the third parameter of the\n`useAsyncFunction` hook.\n\n## Identity Reducer\n\nAn identity reducer allows you to track multiple calls to the same asynchronous\nfunction. This is particularly useful when tracking API calls, where each call's\nfulfillment, pending, and rejection states are unique.\n\nAn identity reducer takes the call's arguments as its arguments and returns a\nstring unique to that call.\n\n```javascript\n// Asynchronously fetch a user's data by their username.\nfunction fetchUser({ username }) {\n  return fetch(`/users/${username}`);\n}\n\n// Uniquely identify an asynchronous function call by the username.\nfunction idByUsername({ username }) {\n  return username;\n}\n\nfunction MyComponent() {\n  const dispatch = useAsyncFunction(fetchUser, idByUsername);\n\n  // We can determine if this call has been made by the presence of a property\n  //   with the call's ID.\n  if (!dispatch.admin) {\n    dispatch({ username: 'admin' });\n    return null;\n  }\n  if (!dispatch.bob) {\n    dispatch({ username: 'bob' });\n    return null;\n  }\n\n  // The state of the call is stored on the property with the call's ID.\n  if (dispatch.admin.state === State.Fulfilled) {\n    return \u003cdiv\u003eAdmin loaded with {dispatch.admin.value}.\u003c/div\u003e;\n  }\n}\n```\n\n## Options\n\n### throwError\n\n**Default:** `false`\n\n**Type:** `boolean`\n\nIf `true`, the asynchronous function will throw any encountered errors,\nrequiring a `.catch` block.\n\nIf `false`, the asynchronous function will swallow any errors. The component\nwill rerender, and the `error` property of the async function will be set to the\ncaught error.\n\n## Sponsor 💗\n\nIf you are a fan of this project, you may\n[become a sponsor](https://github.com/sponsors/CharlesStover)\nvia GitHub's Sponsors Program.\n","funding_links":["https://github.com/sponsors/CharlesStover"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesstover%2Fuse-async-function","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlesstover%2Fuse-async-function","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlesstover%2Fuse-async-function/lists"}