# use-is-mounted-ref

> 📦 React Hooks for mount state tracking and auto-cleanup with AbortController.

Latest version **2.1.1** (published 2026-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-is-mounted-ref
pnpm add use-is-mounted-ref
yarn add use-is-mounted-ref
bun add use-is-mounted-ref
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2026-04-09 |
| First published | 2020-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 44 |
| Author | Helder B. Berto |
| Maintainers | helderberto |
| Keywords | react, hook, mounted, unmounted, ref, abort, abortcontroller, abortsignal, cleanup, memory-leak, strict-mode |

## Links

- npm: https://www.npmjs.com/package/use-is-mounted-ref
- Repository: https://github.com/helderberto/use-is-mounted-ref
- Homepage: https://github.com/helderberto/use-is-mounted-ref#readme
- Issues: https://github.com/helderberto/use-is-mounted-ref/issues
- npm.io page: https://npm.io/package/use-is-mounted-ref

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

- 2.1.1 (latest) — 2026-04-09
- 2.1.0 — 2026-04-09
- 2.0.0 — 2026-02-01
- 1.5.0 — 2022-01-19
- 1.4.0 — 2021-04-30
- 1.3.1 — 2021-03-29
- 1.3.0 — 2021-03-23
- 1.2.3 — 2021-02-10
- 1.2.2 — 2021-01-28
- 1.2.1 — 2021-01-05
- 1.2.0 — 2020-11-30
- 1.1.0 — 2020-11-16
- 1.0.1 — 2020-09-02
- 1.0.0 — 2020-05-14
- 0.1.0 — 2020-05-12

## README

<div align="center">
  <h1>📦 use-is-mounted-ref</h1>

  <p><strong>React Hooks for mount state tracking and auto-cleanup with AbortController/AbortSignal</strong></p>

<!-- prettier-ignore-start -->
[![build][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[![downloads][downloads-badge]][npmtrends]
<!-- prettier-ignore-end -->

</div>

---

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Motivation](#motivation)
- [Installation](#installation)
- [Hooks](#hooks)
  - [useIsMountedRef](#useismountedref)
  - [useAbortController](#useabortcontroller)
  - [useAbortSignal](#useabortsignal)
- [Migration from v1 to v2](#migration-from-v1-to-v2)
- [Contributing](#contributing)
- [Bugs and Sugestions](#bugs-and-sugestions)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Motivation

Prevent memory leaks and auto-cancel async work when components unmount. React Strict Mode compatible.

<details>
<summary>Common warning this library helps avoid</summary>

```js
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
```

</details>

## Installation

```bash
yarn add use-is-mounted-ref
# or
npm install use-is-mounted-ref
```

## Hooks

### useIsMountedRef

Track component mount state with a ref.

<details>
<summary>Example: Avoid setState when unmounted</summary>

```jsx
import { useState, useEffect } from 'react';
import { useIsMountedRef } from 'use-is-mounted-ref';

function App() {
  const isMountedRef = useIsMountedRef();
  const [state, setState] = useState({
    loading: true,
    error: false,
    data: [],
  });

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then(({ data }) => {
        if (isMountedRef.current) {
          setState((prev) => ({ ...prev, loading: false, data }));
        }
      })
      .catch((err) => {
        if (isMountedRef.current) {
          setState((prev) => ({ ...prev, loading: false, error: true }));
        }
      });
  }, [isMountedRef]);

  return state.loading ? 'Loading...' : 'Found Data!';
}
```

</details>

### useAbortController

Automatically abort fetch requests and async operations on unmount.

<details>
<summary>Example: Auto-cancel fetch on unmount</summary>

```jsx
import { useState, useEffect } from 'react';
import { useAbortController } from 'use-is-mounted-ref';

function App() {
  const abortController = useAbortController();
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data', {
      signal: abortController.signal,
    })
      .then((response) => response.json())
      .then(setData)
      .catch((err) => {
        if (err.name !== 'AbortError') {
          console.error(err);
        }
      });
  }, [abortController]);

  return <div>{data ? 'Loaded!' : 'Loading...'}</div>;
}
```

</details>

### useAbortSignal

Returns an `AbortSignal` that automatically aborts on unmount. Simpler API for the most common use case — you usually only need the signal, not the full controller.

<details>
<summary>Example: Auto-cancel fetch on unmount</summary>

```jsx
import { useState, useEffect } from 'react';
import { useAbortSignal } from 'use-is-mounted-ref';

function UserProfile({ id }) {
  const signal = useAbortSignal();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${id}`, { signal })
      .then((res) => res.json())
      .then(setUser)
      .catch((err) => {
        if (err.name !== 'AbortError') {
          console.error(err);
        }
      });
  }, [id, signal]);

  return <div>{user?.name}</div>;
}
```

</details>

<details>
<summary>Example: Auto-cleanup event listeners</summary>

The `signal` option in `addEventListener` removes the listener automatically when aborted — no need for manual `removeEventListener`.

```jsx
import { useEffect } from 'react';
import { useAbortSignal } from 'use-is-mounted-ref';

function useWindowResize(callback) {
  const signal = useAbortSignal();

  useEffect(() => {
    window.addEventListener('resize', callback, { signal });
  }, [callback, signal]);
}
```

</details>

<details>
<summary>Example: Cancel timers on unmount</summary>

```jsx
import { useEffect } from 'react';
import { useAbortSignal } from 'use-is-mounted-ref';

function useDelayedAction(action, delay) {
  const signal = useAbortSignal();

  useEffect(() => {
    const id = setTimeout(action, delay);
    signal.addEventListener('abort', () => clearTimeout(id));
  }, [action, delay, signal]);
}
```

</details>

<details>
<summary>Example: Combine hooks</summary>

```jsx
import { useState, useEffect } from 'react';
import { useIsMountedRef, useAbortController } from 'use-is-mounted-ref';

function App() {
  const isMountedRef = useIsMountedRef();
  const abortController = useAbortController();
  const [state, setState] = useState({ loading: true, data: null });

  useEffect(() => {
    fetch('https://api.example.com/data', {
      signal: abortController.signal,
    })
      .then((res) => res.json())
      .then((data) => {
        if (isMountedRef.current) {
          setState({ loading: false, data });
        }
      })
      .catch((err) => {
        if (err.name !== 'AbortError' && isMountedRef.current) {
          setState({ loading: false, data: null });
        }
      });
  }, [abortController, isMountedRef]);

  return state.loading ? 'Loading...' : 'Loaded!';
}
```

</details>

## Migration from v1 to v2

**Breaking change:** Default export replaced with named exports.

```diff
- import useIsMountedRef from 'use-is-mounted-ref';
+ import { useIsMountedRef } from 'use-is-mounted-ref';
```

New hook available:

```js
import { useAbortController } from 'use-is-mounted-ref';
```

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Bugs and Sugestions

Report bugs or do suggestions using the [issues](https://github.com/helderberto/use-is-mounted-ref/issues).

## License

[MIT License](LICENSE) © [helderberto](https://helderberto.com)

<!-- prettier-ignore-start -->
[version-badge]: https://img.shields.io/npm/v/use-is-mounted-ref.svg?style=flat-square
[package]: https://www.npmjs.com/package/use-is-mounted-ref
[downloads-badge]: https://img.shields.io/npm/dm/use-is-mounted-ref.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/use-is-mounted-ref
[license-badge]: https://img.shields.io/npm/l/use-is-mounted-ref.svg?style=flat-square
[license]: https://github.com/helderberto/use-is-mounted-ref/blob/master/LICENSE
[build]: https://github.com/helderberto/use-is-mounted-ref/actions
[build-badge]: https://github.com/helderberto/use-is-mounted-ref/actions/workflows/ci.yml/badge.svg
<!-- prettier-ignore-end -->

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