# use-unmount-signal

> A React Hook to cancel promises when a component is unmounted

Latest version **1.0.0** (published 2021-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-unmount-signal
pnpm add use-unmount-signal
yarn add use-unmount-signal
bun add use-unmount-signal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-04-22 |
| First published | 2021-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 292 |
| Author | Expo |
| Maintainers | ide |
| Keywords | react, hook, unmount, cancel, abortcontroller, abortsignal |

## Links

- npm: https://www.npmjs.com/package/use-unmount-signal
- Repository: https://github.com/expo/use-unmount-signal
- Homepage: https://github.com/expo/use-unmount-signal#readme
- Issues: https://github.com/expo/use-unmount-signal/issues
- npm.io page: https://npm.io/package/use-unmount-signal

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-04-22

## 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)

`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.

## API

### `useUnmountSignal(): AbortSignal`

A React Hook that returns an `AbortSignal` object that is marked as aborted when the calling component is unmounted.

## Example

```jsx
import useUnmountSignal from 'use-unmount-signal';

function Example() {
  // useUnmountSignal returns an AbortSignal object that APIs like fetch accept
  const unmountSignal = useUnmountSignal();
  return (
    <button
      onClick={() =>
        fetch('https://ping.example.com', { signal: unmountSignal })
      }>
      Ping
    </button>
  );
}
```

### With async function event handlers

```jsx
import { useState } from 'react';
import useUnmountSignal from 'use-unmount-signal';

function Example() {
  const unmountSignal = useUnmountSignal();
  const [status, setStatus] = useState('ready');

  async function handleClick({ signal }) {
    if (signal.aborted) { throw new AbortError(); }

    const response = await fetch('https://ping.example.com', { signal });
    if (signal.aborted) { throw new AbortError(); }

    // We are guaranteed that the component is still mounted at this point
    if (response.ok) {
      setState('OK');
    } else {
      setState(response.status);
    }
  }

  return <button onClick={handleClick}>Ping {status}</button>;
}
```

---
_Source: https://npm.io/package/use-unmount-signal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._