Is there a way to check if the react component is unmounted?

Question

I have a usecase where i need to unmount my react component. But in some cases, the particular react component is unmounted by a different function. Hence, I need to check if the component is mounted before unmounting it.

Answer 1

Since isMounted() is being officially deprecated, you can do this in your component:

componentDidMount() {    this._ismounted = true; }  componentWillUnmount() {    this._ismounted = false; } 

This pattern of maintaining your own state variable is detailed in the ReactJS documentation: isMounted is an Antipattern.

Answer 2

I'll be recommended you to use the useRef hook for keeping track of component is mounted or not because whenever you update the state then react will re-render the whole component and also it will trigger the execution of useEffect or other hooks.

function MyComponent(props: Props) {   const isMounted = useRef(false)    useEffect(() => {     isMounted.current = true;     return () => { isMounted.current = false }   }, []);    return (...); }  export default MyComponent; 

and you check if the component is mounted with if (isMounted.current) ...