<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <!--BABEL-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

const useUnmounted = (callback) => {
  React.useEffect(() => {
    return callback
  }, [])
}

const Child = () => {
  const [ count, setCount ] = React.useState(0)

  useUnmounted(() => {
    console.log('useUnmounted', count)
  })

  return (
    <div>
      count: {count}
      <button onClick={() => setCount(count + 1)}>add</button>
    </div>
  )
}

const UseUnmountedDemo = () => {
  const [showChild, setShowChild] = React.useState(true);

  return (
    <div>
      { !!showChild && <Child /> }
      <button onClick={() => setShowChild(false)}>Destroy child</button>
    </div>
  )
}

const Demo = () => {
  const [ num, setNum ] = React.useState(0)

  React.useEffect(() => {
    const timer = setInterval(() => {
      setNum((prevNum) => prevNum + 1)
    }, 1000)
  }, [])

  return (
    <div>
      <p>Num: {num}</p>
    </div>
  )
}


// ReactDOM.render(<UseUnmountedDemo />, document.getElementById('app'))

ReactDOM.render(<Demo />, document.getElementById('app'))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.