Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/helderberto/use-is-mounted-ref

📦 useIsMountedRef() is a React Hook to check when the component is mounted.
https://github.com/helderberto/use-is-mounted-ref

hook hooks mounted react react-hook react-ref

Last synced: 20 days ago
JSON representation

📦 useIsMountedRef() is a React Hook to check when the component is mounted.

Awesome Lists containing this project

README

        


📦 use-is-mounted-ref

useIsMountedRef is a React Hook to check when the component is mounted.

[![build][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[![downloads][downloads-badge]][npmtrends]

---

## Table of Contents

- [Motivation](#motivation)
- [Usage](#usage)
- [Component Lifecycle Overview](#component-lifecycle-overview)
- [Contributing](#contributing)
- [Bugs and Sugestions](#bugs-and-sugestions)
- [License](#license)

## Motivation

- Avoid memory leaks setting states when component are unmounted;
- Control when component already mounted;
- Common error when setting state to unmounted component:

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

## Usage

To start using the `use-is-mounted-ref` in your project, first install in your project:

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

Avoid set state when unmounted component:

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

function App() {
const isMountedRef = useIsMountedRef();

const initialState = {
loading: false,
error: false,
data: [],
};

const [state, setState] = useState(initialState);

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

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

export default App;
```

## Component Lifecycle Overview

```mermaid
flowchart TD
subgraph "Component Lifecycle"
direction TB
A1["Component Mounted"] --> A2["useIsMountedRef Hook"]
A2 --> B1["useRef(false)"]
B1 --> C1["useEffect Hook"]
C1 --> D1["isMountedRef.current = true"]

C1 --> E1["Component Unmounted"]
E1 --> F1["Cleanup function"]
F1 --> G1["isMountedRef.current = false"]
end

subgraph "Usage in Component"
H1["Check if Component is Mounted"]
H1 --> I1{isMountedRef.current ?}
I1 -- "True" --> J1["Perform Mounted Actions"]
I1 -- "False" --> K1["Do Not Perform Actions"]
end
```

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

[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