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',
    }
  }
};

marekpiechut

<Profiler
	id="user-profile"
	onRender={(
		id,
		phase,
		actualTime,
		baseTime,
		startTime,
		commitTime,
		interactions

marekpiechut

import { useState } from 'react'

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

marekpiechut

const NotificationItem = React.memo<Props>(
	({ notification, onMmarkAsRead, session }) => <div>...</div>

marekpiechut

const NotificationItem = ({ notification, onMmarkAsRead, session }: Props) => <div>...</div>

marekpiechut

const App = () => {
  const loadData = id => ({ id, value: 'some' })
  const [_, setDummy] = useState()

  return (
    <div className="App">
      <button onClick={() => setDummy(Date.now())} />
      <SlowComponent
        onClick={React.useCallback(() => loadData('dummy'), [])}
      />

marekpiechut

const App = () => {
  const loadData = id => ({ id, value: 'some' })
  const [_, setDummy] = useState()

  return (
    <div className="App">
      <button onClick={() => setDummy(Date.now())}>Render</button>
      <SlowComponent onClick={() => loadData('dummy')} />
    </div>
  )