<div id="root"></div>

const useIsMountedRef = () => {
	const isMounted = React.useRef(false);
	React.useEffect(() => {
    console.log("I will do that")
		isMounted.current = true;
		return () => (isMounted.current = false);
	}, []);
	return isMounted;
};

function Child() {
  React.useEffect(() => {
    console.log("child")
  },[])
  return (
  
  <h1> Child</h1>
  )
}

function App() {
  const isMountedRefApproach = useIsMountedRef()
  
  React.useEffect(() => {
    if(isMountedRefApproach.current) {
         console.log("I am mounted")
    }
  }, [isMountedRefApproach.current])
  
  React.useEffect(() => {
    console.log("parent")
  },[])
  
  console.log("isMountedRefApproach.current", isMountedRefApproach.current)
  
  return <div><Child /></div>
}


ReactDOM.render(<App />, document.getElementById("root"))