porfidev/ejemplo.html

## ejemplo.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>React.js Optimization</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      const { useState } = React;

      const App = () => {
        const [color, setColor] = useState("blue");

        const ComponenteCostoso = () => {
          const now = performance.now();
          while (performance.now() - now < 100) {
            // Perder el tiempo Aquí
          }
          return <p>Componente que toma tiempo</p>;
        };

        return (
          <div>
            <input value={color} onChange={(e) => setColor(e.target.value)} />
            <p style={{ color }}>Hola componente de react.js</p>
            <ComponenteCostoso />
          </div>
        );
      };

      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8" />
	<title>React.js Optimization</title>
	</head>
	<body>
	<div id="root"></div>
	<script
	src="https://unpkg.com/react@17/umd/react.development.js"
	crossorigin
	></script>
	<script
	src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
	crossorigin
	></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<script type="text/babel">
	const { useState } = React;

	const App = () => {
	const [color, setColor] = useState("blue");

	const ComponenteCostoso = () => {
	const now = performance.now();
	while (performance.now() - now < 100) {
	// Perder el tiempo Aquí
	}
	return <p>Componente que toma tiempo</p>;
	};

	return (
	<div>
	<input value={color} onChange={(e) => setColor(e.target.value)} />
	<p style={{ color }}>Hola componente de react.js</p>
	<ComponenteCostoso />
	</div>
	);
	};

	ReactDOM.render(
	<React.StrictMode>
	<App />
	</React.StrictMode>,
	document.getElementById("root")
	);
	</script>
	</body>
	</html>