Marco – Automating Performance Benchmarking in React Native
summary
Marco is a lightweight React Native performance library that measures FMP and LMP by instrumenting native rendering (uses the Android/iOS onDraw hook) and exposing a simple HOC performance tracker. It ties JS traces to native lifecycle events, integrates with Maestro/Detox, generates mean/SD/error stats, and runs as a daily pipeline (50+ tests, ~5,000+ job runs powering 300+ releases). Concrete findings include 100 ms equating to ~25k concurrent users lost at 15M peak and baseline benchmarks such as native bottom tabs ~300ms.
AI-written summary · about
chapters (16)
- 0:00Introduction and context
- 1:06What is performance in apps
- 3:10Challenges in tracking performance
- 6:26Defining meaningful paint metrics
- 8:36React Native rendering process
- 10:24Need for performance tracking tools
- 11:06Impact of 100ms delays on business
- 12:11Introducing Marco tool
- 13:14History behind Marco
- 14:18Marco’s capabilities overview
- 16:27Tracking FMP with Marco
- 19:17Understanding Marco reports
- 20:20Marco in Dream11 pipeline
- 21:43Big decisions enabled by Marco
- 22:05React Native benchmarking tool
- 23:07Benchmarking core libraries
related talks
24mOptimising React Native "Tools and Tips"
26mMeasuring and Improving React Native Performance
31mThe performance myths of React Native
25mHow to actually improve the performance of a React Native app?
25mReact Native Performance - Take 2
24mThe Performance Myths of React Native apps
39mPerformance issues: the usual suspects
30mMaking React Native Fast & Lean