src/AppProfiler.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React, {Profiler} from 'react'

// Don't let it get stripped out in profiling builds (which apply production Babel preset).
const log = (global as any)['con' + 'sole'].log

function onRender(id: string, phase: string, actualDuration: number) {
  if (!__DEV__) {
    // This block of code will exist in the production build of the app.
    // However, only profiling builds of React call `onRender` so it's dead code in actual production.
    const message = `<Profiler> ${id}:${phase} ${
      actualDuration > 500
        ? '(╯°□°）╯ '
        : actualDuration > 100
        ? '[!!] '
        : actualDuration > 16
        ? '[!] '
        : ''
    }${Math.round(actualDuration)}ms`
    log(message)
  }
}

export function AppProfiler({children}: {children: React.ReactNode}) {
  return (
    <Profiler id="app" onRender={onRender}>
      {children}
    </Profiler>
  )
}