<!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 useMounted = (callback) => {
  React.useEffect(callback, []);
};

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

  useMounted(() => {
    console.log("useMounted");
  });

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


ReactDOM.render(<UseMountDemo />, 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.