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

const useIsMounted = () => {
  const [isMounted, setisMounted] = React.useState(false);
  React.useEffect(() => {
    setisMounted(true);
    return () => setisMounted(false);
  }, []);

  return isMounted;
};


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

function App() {
  // const isMounted = useIsMounted()
  const isMounted = useIsMounted()
 
  
  React.useEffect(() => {
    if(isMounted) {
         console.log("i am mounted")
    }
  }, [isMounted])
  
  React.useEffect(() => {
    console.log("parent")
  },[])
  
  console.log("isMounted", isMounted)
  
  return <div><Child /></div>
}

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