marekpiechut

const SlowComponent = React.memo(({ text, onClick }) => {
  const arr = []
  for (var i = 1000000 - 1; i >= 0; i--) {
    arr.push(i)
  }
  return (
    <div>
      <div>I'm slow {text}</div>
      <button onClick={onClick}/>
    </div>

marekpiechut

adb reverse tcp:8097 tcp:8097

marekpiechut

<script src="http://localhost:8097"></script>

marekpiechut

npm install -g react-devtools
react-devtools

marekpiechut

import {
  unstable_trace as trace,
  unstable_wrap as wrap,
} from 'scheduler/tracing'

const useData = () => {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState(null)

  const fetch = () => {

marekpiechut

import {
  unstable_trace as trace,
  unstable_wrap as wrap,
} from 'scheduler/tracing'

<button
  onClick={() =>
    trace('Fetch data', performance.now(), () => {
      setLoading(true)
      fetchData()

marekpiechut

import {
  unstable_trace as trace,
} from 'scheduler/tracing'

<input
  type="text"
  value={name}
  onChange={e => {
    trace('Enter user name', performance.now(), () =>
       onChange(e.target.value)

marekpiechut

const ROUNDS = 100_000
const Benchmark = () => {
  const [took, setTook] = useState()
  const [round, setRound] = useState(1)
  const start = useRef(performance.now())

  useEffect(() => {
    if (round < ROUNDS) {
      setRound(round + 1)
    } else {

marekpiechut

# Using Yarn
yarn build --profile
# Using NPM
npm run build -- --profile

marekpiechut

module.exports = {
  //...
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }
  }
};