Performance - leotm/react-native-template-new-architecture GitHub Wiki

Problems

  • no boot
  • slow tti
  • crash
  • freeze
  • hanging
  • slow response
  • slow rtt
  • stutter (fps)
  • error (un)handled
  • tearing (fps/hz)
  • missing/wrong data
  • broken ui
  • high battery (cpu)
  • fat binary/bundle
  • high/leaky ram

Causes

  • js
    • logic/render, caching, ScrollView, nested views
    • lib, state man, react 19
  • rn (old/new) arch
  • js engine
    • (webkit/android)jsc/v8/(static)hermes
  • renderer
    • fabric/skia
  • modules
    • (turbo/nitro)modules
  • backend
    • http (rest/gql)
    • websockets (tcp)
    • webrtc (p2p)
  • starvation
    • low battery
    • power save mode
  • user agent
    • blue light filter
    • magnification
  • concurrency (threads)
    • hogging
    • (dead/live)lock
    • race condition

Metrics

  • release
    • adoption
    • crash-free sessions
    • new/retained/resurrected/inactive users
    • reviews/rating
  • tti
    • tfcp
    • tfmp
  • errors
    • (un)handled
    • stacktrace (sourcemaps)
    • events (analytics)
  • ui
    • fps (js/native)
    • renders
  • cpu
  • ram
  • network
    • rtt
    • downtime
  • battery
  • size
    • apk/ipa
    • js bundle
  • analytics
    • events (single, series)
    • users (data, groups)
  • The only metric that matters to me
  • e2e screens/vids

Tools

  • Debug menu > Perf Monitor
  • Hermes sampling profile
  • Flipper RN Debugger
    • breakpoints
    • Chrome profiler > React DevTools > Flame graph

Release build

  • iOS: Xcode > Instruments
  • Android: Studio Profiler
    • Systrace Perfetto

Libs

No Problem