React-profiler

sublime-medium.txt

import { useState } from 'react'

const SlowComponent = ({ noSlowdown }) => {
  const arr = []
  if (!noSlowdown) {
    for (var i = 1000000 - 1; i >= 0; i--) {
      arr.push(i)
    }
  }

  return <div>I'm slooooooow</div>
}

const FastComponent = () => {
  return <div>I'm fassssst....</div>
}

function App() {
  const [dummy, setDummy] = useState()
  return (
    <div className="App">
      <SlowComponent noSlowdown={dummy % 2} />
      <FastComponent />
      <button onClick={() => setDummy(Date.now())}>Render!</button>
    </div>
  )
}

export default App