Kwaśniewski explains that time to interactive (TTI) measures the time from opening the app to seeing meaningful content, and distinguishes cold, warm, hot, and iOS prewarm starts. React Native Performance can track lifecycle events such as `nativeLaunchStart` and `runJSBundleStart`; iOS prewarming can complicate measurements. For frame rate, the Dev Menu shows UI and JavaScript thread FPS, while Flashlight can track performance over time on Android.
Tips & Tricks From the Ultimate Guide to RN Optimization 2025
Speaker
Oskar Kwaśniewski, senior software engineer at Callstack and a React Native contributor, shares optimization tips from the Ultimate Guide to React Native Optimization.
Concurrent React can pause or abandon rendering work, and React Native requires the New Architecture to use these features. Kwaśniewski demonstrates `useDeferredValue` with a slow component: deferring its updates keeps text input more responsive while the component still renders.
The React Compiler is a Babel plugin that memoizes values and can reduce unnecessary renders, provided the code follows React’s rules. In the Expensify app, enabling it resulted in up to 4.3% faster TTI; apps that are already heavily memoized may see smaller gains. For heavy JavaScript-thread computation, he cites React Native Quick Crypto as up to 58 times faster than CryptoJS by using C++.
View flattening merges layout-only nodes to simplify the native hierarchy, but can change how many children a native component receives. Setting `collapsable={false}` on a view preserves it when the expected child count matters. Kwaśniewski also recommends disabling Android bundle compression so Hermes can use memory mapping; this is the default from React Native 0.79, and older versions can add `noCompress` in `build.gradle` for around 12% faster TTI, as stated in the transcript.
Takeaways
- Measure TTI across startup types, and account for iOS prewarming when interpreting results.
- Use `useDeferredValue` to keep urgent interactions responsive while slower rendering continues.
- Try the React Compiler, but compare results against your app’s existing memoization and measured TTI.
- Move heavy computation off the JavaScript implementation when a suitable React Native native library is available.
- Check view flattening where native child counts matter, and check Android bundle compression for Hermes memory mapping.
Mentioned in this talk
Search inside this talk
What was claimed 14
- built
“I've created ... React Native Bottom Tabs”
YouTube Verified2 sources· Talk
- built
“I've created React Native VisionOS”
YouTube Unverified1 source· Talk
- role atOskar Kwaśniewski is senior software engineer at
Callstack“I'm a senior software engineer at Callstack”
YouTube Verified2 sources· Talk
- featureReact Native Performance: Tracks performance metrics and app lifecycle events
“use React Native Performance and its performance metrics to track specific events”
YouTube Unverified1 source· Talk
- featureFlashlight: Measures and tracks FPS and performance over time; supported on Android
“help you measure and track your FPS and performance over time”
YouTube Unverified1 source· Talk
- usesReact Native uses Fabric
“To use Concurrent React in React Native, you have to enable the New Architecture.”
YouTube Unverified1 source· Talk
- featureConcurrent React: Can pause or abandon an in-progress render
“it may start rendering an update, pause in the middle, or even abandon the process”
YouTube Unverified1 source· Talk
- featureReact Compiler: Memoizes values to reduce React renders
“a Babel plugin that memoizes values in your code to reduce React renders”
YouTube Unverified1 source· Talk
- metricReact Compiler: Up to 4.3% faster TTI in the Expensify app
“Enabling the React Compiler in the Expensify app resulted in up to 4.3% faster TTI”
YouTube Unverified1 source· Talk
- metricReact Native Quick Crypto: Up to 58 times faster than CryptoJS
“Replacing CryptoJS with React Native Quick Crypto results in up to 58 times faster performance”
YouTube Unverified1 source· Talk
- uses
“up to 58 times faster performance due to using C++ directly”
YouTube Unverified1 source· Talk
- featureView flattening: Simplifies the native view hierarchy by flattening layout-only nodes
“an optimization called view flattening, which can simplify your native view hierarchy”
YouTube Unverified1 source· Talk
- uses
“disable JavaScript bundle compression to leverage Hermes' built-in memory mapping”
YouTube Unverified1 source· Talk
- metricReact Native: Around 12% faster startup (called DTI in the transcript)
“this should give you around 12% faster DTI”
YouTube Unverified1 source· Talk
