{"id":13496255,"url":"https://github.com/expo/use-unmount-signal","last_synced_at":"2025-10-10T13:16:03.128Z","repository":{"id":52387688,"uuid":"360666400","full_name":"expo/use-unmount-signal","owner":"expo","description":"A React Hook to cancel promises when a component is unmounted","archived":false,"fork":false,"pushed_at":"2025-01-09T19:08:19.000Z","size":79,"stargazers_count":294,"open_issues_count":0,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-15T18:57:54.549Z","etag":null,"topics":["cancellation","hooks","react"],"latest_commit_sha":null,"homepage":"","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/expo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-22T19:56:10.000Z","updated_at":"2025-04-04T04:04:31.000Z","dependencies_parsed_at":"2025-02-14T03:01:46.420Z","dependency_job_id":"c6c08940-6a9d-465f-bb49-72e4927acd97","html_url":"https://github.com/expo/use-unmount-signal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fuse-unmount-signal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fuse-unmount-signal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fuse-unmount-signal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fuse-unmount-signal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/expo","download_url":"https://codeload.github.com/expo/use-unmount-signal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436944,"owners_count":22070946,"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":["cancellation","hooks","react"],"created_at":"2024-07-31T19:01:44.641Z","updated_at":"2025-10-10T13:15:58.098Z","avatar_url":"https://github.com/expo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# use-unmount-signal [![Tests](https://github.com/expo/use-unmount-signal/actions/workflows/tests.yml/badge.svg)](https://github.com/expo/use-unmount-signal/actions/workflows/tests.yml) [![codecov](https://codecov.io/gh/expo/use-unmount-signal/branch/main/graph/badge.svg?token=6YVSvvk4zB)](https://codecov.io/gh/expo/use-unmount-signal)\n\n`useUnmountSignal` is a React Hook to cancel promises when a component is unmounted. It uses [the W3C-standard `AbortSignal` API](https://dom.spec.whatwg.org/#interface-AbortSignal) to notify compatible promises when the calling component is unmounted.\n\n## API\n\n### `useUnmountSignal(): AbortSignal`\n\nA React Hook that returns an `AbortSignal` object that is marked as aborted when the calling component is unmounted.\n\n## Example\n\n```jsx\nimport useUnmountSignal from 'use-unmount-signal';\n\nfunction Example() {\n  // useUnmountSignal returns an AbortSignal object that APIs like fetch accept\n  const unmountSignal = useUnmountSignal();\n  return (\n    \u003cbutton\n      onClick={() =\u003e\n        fetch('https://ping.example.com', { signal: unmountSignal })\n      }\u003e\n      Ping\n    \u003c/button\u003e\n  );\n}\n```\n\n### With async function event handlers\n\n[The HTML5 specification says](https://dom.spec.whatwg.org/#abortsignal-abort-algorithms):\n\n\u003e Any web platform API using promises to represent operations that can be aborted must adhere to the following:\n\u003e \n\u003e * Accept `AbortSignal` objects through a `signal` dictionary member.\n\u003e * Convey that the operation got aborted by rejecting the promise with an \"`AbortError`\" `DOMException`.\n\u003e * Reject immediately if the `AbortSignal`'s aborted flag is already set, otherwise:\n\u003e * Use the abort algorithms mechanism to observe changes to the `AbortSignal` object and do so in a manner that does not lead to clashes with other observers.\n\nCalling any async function creates a promise. Therefore, authors of async functions need to follow the above guidance to write abortable functions.\n\n```jsx\nimport { useState } from 'react';\nimport useUnmountSignal from 'use-unmount-signal';\n\nfunction Example() {\n  const unmountSignal = useUnmountSignal();\n  const [status, setStatus] = useState('ready');\n\n  const handleClick = useCallback(\n    async () =\u003e {\n      if (unmountSignal.aborted) { throw new AbortError(); }\n\n      const response = await fetch('https://ping.example.com', { signal: unmountSignal });\n      if (unmountSignal.aborted) { throw new AbortError(); }\n\n      // We are guaranteed that the component is still mounted at this point\n      if (response.ok) {\n        setStatus('OK');\n      } else {\n        setStatus(response.status);\n      }\n    },\n    [unmountSignal, setStatus]\n  );\n\n  return \u003cbutton onClick={handleClick}\u003ePing {status}\u003c/button\u003e;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpo%2Fuse-unmount-signal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexpo%2Fuse-unmount-signal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpo%2Fuse-unmount-signal/lists"}