Optimising React Native "Tools and Tips"
summary
Perf work targets concrete bottlenecks: use perf monitor overlay, marker-based CTrace profiling and a JavaScriptCore CPU profiler to find where anonymous functions consume ~48% of cycles, fix an expensive regex that reduces startup and scrolling lag, and correct list keys to move a product from <10 FPS to 60 FPS. The codebase changes include debouncing bridge calls, incremental UI updates, and shifting layout work off the main thread to shadow and background threads so native rendering stops blocking frames.
AI-written summary · about
chapters (13)
- 0:00Intro
- 0:27NATIVE APPS FEEL BETTER
- 4:01PREMATURE OPTIMIZATION IS THE ROOT OF ALL EVIL
- 8:13SYSTRACE
- 8:34MARKERS ON SENSITIVE BRIDGE OPERATIONS AUTOMATICALLY INJECTED MARKERS ON ALL NATIVE MODULES
- 11:44CPU PROFILER
- 16:57SHOULD COMPONENT UPDATE
- 17:57AVOID RENDERING SUBTREES
- 18:50CORE OPTIMISATIONS
- 19:07DE-BATCHING
- 22:10INCREMENTAL UI UPDATES
- 23:08THAT'S NOT HOW IT WORKS
- 24:00DON'T ASSUME. PROFILE!
related talks
25mReact Native Performance - Take 2
39mPerformance issues: the usual suspects
30mMaking React Native Fast & Lean
23mPractical Performance for React Native
26mMeasuring and Improving React Native Performance
24mThe Performance Myths of React Native apps
26mOptimizing React Native Performance
25mHow to actually improve the performance of a React Native app?