React Native Performance - Take 2

Parashuram revisits his 2019 talk, which focused on application startup and native-side optimizations such as TurboReactPackage and Hermes. For this second take, he shifts attention toward JavaScript performance and frame rates, aiming to improve responsiveness and smoothness.

React Native’s performance monitor reports UI and JavaScript FPS, based on frame callbacks and whether JavaScript work or bridge batches are processed. Parashuram explains sampling profiles as a way to inspect JavaScript call stacks over time. On Android, Hermes profiles can be captured and converted with `react-native profile-hermes` for viewing in Chrome; iOS profiles can be recorded through Safari.

The React Profiler in Flipper shows React commits, component work, and which props or state caused an update. Parashuram suggests using that information to limit unnecessary renders, including with `shouldComponentUpdate`. Flipper also provides tools for inspecting images, network activity, and native layout.

Long JavaScript event handlers can delay later touches even while the UI thread continues to scroll. Parashuram recommends giving immediate feedback first, then scheduling longer work with `InteractionManager.runAfterInteractions` or timers, while breaking up tasks that run too long. For smoother animations, `useNativeDriver` and `LayoutAnimation` move animation work to the UI thread, with tradeoffs in control and selectivity.

Parashuram notes that short timer intervals can contribute to problems because timers call through native modules and the bridge. Image scaling and overlapping translucent views can also burden the UI thread; rasterizing frequently resized images may help. He closes by pointing to scrolling lists as a separate challenge involving both memory use and the amount of data rendered.