{"id":13846958,"url":"https://github.com/rauldeheer/use-async-effect","last_synced_at":"2025-07-12T08:30:59.565Z","repository":{"id":33522959,"uuid":"159173398","full_name":"rauldeheer/use-async-effect","owner":"rauldeheer","description":":running: Asynchronous side effects, without the nonsense","archived":false,"fork":false,"pushed_at":"2023-05-02T12:06:09.000Z","size":228,"stargazers_count":317,"open_issues_count":0,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-21T14:05:49.041Z","etag":null,"topics":["async","async-await","await","hooks","react","react-native","reactjs","use-async-effect","useeffect"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/rauldeheer.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-26T13:24:08.000Z","updated_at":"2024-11-14T10:22:05.000Z","dependencies_parsed_at":"2024-01-15T20:47:30.865Z","dependency_job_id":null,"html_url":"https://github.com/rauldeheer/use-async-effect","commit_stats":{"total_commits":61,"total_committers":13,"mean_commits":"4.6923076923076925","dds":0.7540983606557377,"last_synced_commit":"79359810a256cb6aafa09d18beb8264d17719086"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rauldeheer%2Fuse-async-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rauldeheer%2Fuse-async-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rauldeheer%2Fuse-async-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rauldeheer%2Fuse-async-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rauldeheer","download_url":"https://codeload.github.com/rauldeheer/use-async-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225807346,"owners_count":17527238,"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":["async","async-await","await","hooks","react","react-native","reactjs","use-async-effect","useeffect"],"created_at":"2024-08-04T18:00:51.142Z","updated_at":"2024-11-21T21:30:45.521Z","avatar_url":"https://github.com/rauldeheer.png","language":"JavaScript","readme":"![Logo](https://raw.githubusercontent.com/rauldeheer/use-async-effect/master/logo.svg?sanitize=true)\n[![npm version](https://badge.fury.io/js/use-async-effect.svg)](https://www.npmjs.com/package/use-async-effect)\n[![license](https://badgen.net/npm/license/use-async-effect)](./LICENSE)\n\n---\n\n:running: Asynchronous side effects, without the nonsense.\n\n```javascript\nuseAsyncEffect(async () =\u003e {\n  await doSomethingAsync();\n});\n```\n\n## Installation\n\n```\nnpm install use-async-effect\n```\nor\n```\nyarn add use-async-effect\n```\n\nThis package ships with TypeScript and Flow types.\n\n## API\n\nThe API is the same as React's `useEffect()`, except for some notable differences:\n\n- The destroy function is passed as an optional second argument:\n\n```javascript\nuseAsyncEffect(callback, dependencies?);\nuseAsyncEffect(callback, onDestroy, dependencies?);\n```\n\n- The async callback will receive a single function to check whether the callback is still mounted:\n\n```javascript\nuseAsyncEffect(async isMounted =\u003e {\n  const data1 = await fn1();\n  if (!isMounted()) return;\n\n  const data2 = await fn2();\n  if (!isMounted()) return;\n\n  doSomething(data1, data2);\n});\n```\n\n\u003e Mounted means that it's running in the current component. It becomes unmounted if the component unmounts, or if the component is re-rendered and the callback is dropped and a new one is called.\n\n## Examples\n\nBasic mount/unmount\n```javascript\nuseAsyncEffect(async () =\u003e console.log('mount'), () =\u003e console.log('unmount'), []);\n```\n\nOmitting destroy\n```javascript\nuseAsyncEffect(async () =\u003e console.log('mount'), []);\n```\n\nHandle effect result in destroy\n```javascript\nuseAsyncEffect(() =\u003e fetch('url'), (result) =\u003e console.log(result));\n```\n\nMaking sure it's still mounted before updating component state\n```javascript\nuseAsyncEffect(async isMounted =\u003e {\n  const data = await fetch(`/users/${id}`).then(res =\u003e res.json());\n  if (!isMounted()) return;\n  setUser(data);\n}, [id]);\n```\n\n## Linting dependencies list using `ESLint`\n\nThe `react-hooks/exhaustive-deps` rule allows you to check your custom hooks. \nFrom the [Advanced Configuration](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks#advanced-configuration) options:\n\u003e `exhaustive-deps` can be configured to validate dependencies of custom Hooks with the `additionalHooks` option. This option accepts a regex to match the names of custom Hooks that have dependencies.\n\n‼️ Unfortunately, `react-hooks/rules-of-hooks` isn't configurable and the \"Effect callbacks are synchronous to prevent race conditions. Put the async function inside\" warning will be displayed.\n\n```json\n{\n  \"rules\": {\n    // ...\n    \"react-hooks/exhaustive-deps\": [\n      \"warn\",\n      {\n        \"additionalHooks\": \"(useAsyncEffect|useMyOtherCustomHook)\"\n      }\n    ]\n  }\n}\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frauldeheer%2Fuse-async-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frauldeheer%2Fuse-async-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frauldeheer%2Fuse-async-effect/lists"}