Performance issues: the usual suspects

Moureaux introduces a CLI version of the React Native Flipper Performance Monitor to track metrics such as FPS, CPU, and RAM. It can measure Android apps without adding anything to the app, and automate repeated test scenarios. Ten 15-second runs produced an initial score of 31 out of 100 and showed sustained JS thread activity.

React DevTools profiling showed that a countdown hook caused the whole Tweets tab to render each second, taking about 400 milliseconds. Moving the countdown into its own component reduced commits to about 18 milliseconds; using Jotai to isolate the seconds display brought its render time to roughly 0.4 milliseconds. Moving user data queries into a UserHeader component also stopped those updates from rerendering the Tweets tab, and the release score rose from 53 to 67.

The app rendered Media and Replies tabs even when they were not open. Setting the React Navigation Material Top Tab Navigator's lazy option reduced unnecessary work and raised the measured score from 67 to 75, with average CPU usage also falling.

A Hermes profiler trace showed that filtering tweets repeatedly parsed dates to determine weekdays. Replacing that work with a direct weekday check cut the Tweets tab's render time to about 1.7 milliseconds. Android Studio profiling then revealed a skeleton loader animation running behind the loaded list and slowing the UI thread; hiding it improved frame rates. A small WebView displaying a GIF also used substantial CPU, and replacing it helped raise the final score to 96 out of 100.