Low Performace Re-Render Optimized 2

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 ComponenteCostoso = () => {
          const now = performance.now();
          while (performance.now() - now < 100) {
            // Perder el tiempo Aquí
          }

          return <p>Componente que toma tiempo</p>;
        };

        const CambiaColor = ({ children }) => {
          const [color, setColor] = useState("blue");
          return (
            <div style={{color}}>
              <input value={color} onChange={(e) => setColor(e.target.value)} />
              {children}
            </div>
          )
        }

        return (
          <div>
            <CambiaColor>
            <p>Hola soy un texto metiche</p>
            <ComponenteCostoso />
            </CambiaColor>
          </div>
        );
      };

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