Implement useIsMounted hook
May 26, 2021
We can use this custom hook to detect if a component is mounted or unmounted so that we will know when to stop asynchronous action calls.
Implement
import { useEffect, useRef } from 'react';
export const useIsMounted = (): (() => boolean) => {
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
return function cleanup(): void {
isMounted.current = false;
}
}, []);
return isMounted;
};
export default useIsMounted;Usage
We will get the isMounted value from the hook, this is a ref so we don’t need to put it into the useEffect dependency list:
export default function App() {
const isMounted = useIsMounted();
useEffect(() => {
if (isMounted.current) {
// do something
}
}, []);
return (
<div>Hello</div>
);
}