Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/helderberto/use-is-mounted-ref
- Owner: helderberto
- License: mit
- Created: 2020-05-12T23:34:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T13:06:22.000Z (7 months ago)
- Last Synced: 2024-04-13T13:44:42.780Z (7 months ago)
- Topics: hook, hooks, mounted, react, react-hook, react-ref
- Language: JavaScript
- Homepage:
- Size: 4.96 MB
- Stars: 43
- Watchers: 1
- Forks: 5
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
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