use-is-mounted-ref
v1.5.0
Published
📦 useIsMountedRef is a React Hook to check when the component is mounted.
Downloads
400,817
Readme
Table of Contents
Motivation
- Avoid memory leaks setting states when component are unmounted;
- Control when component already mounted;
- Common error when setting state to unmounted component:
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
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;
Contributing
Please read 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.