A React hook to run effect only if a component is mounted.
A React hook to run effect only if a component is mounted.
React.useEffect
asynchronouslyTo add use-mounted-effect to your project, run:
yarn add use-mounted-effect
or
npm install use-mounted-effect
When using an asynchronous effect, it can be a potential memory leak.
const [state, setState] = React.useState();
React.useEffect(() => {
setInterval(() => setState(...), 10_000);
}, []);
If the component is unmounted before the setTimer callback is fired, the state will be updated on something that isn't existing anymore.
This hook will run your effect only if the component is mounted.
You can use useMountedEffect
like you would use React.useEffect
, but it provides you the following benefits:
async
callbackisMounted()
argument that it can use to check if the component is still mountedconst [data, setData] = React.useState();
useMountedEffect(async (isMounted) => {
const { data } = await fetch(url);
if (!isMounted()) return;
setState(data);
}, []);