Low Performace Re-Render

Example for elporfirio.com to show how to optimize

by Porfirio Chavez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root">

</div>

Babel + JSX

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")
      );