RN TV Hermes JS Sampling Profiling – Become The RN JS App Performance SME

Kh irallah frames the investigation around a multiplatform React Native app facing a release-blocking slowdown three days before launch. The reported symptoms are a slow home screen, sluggish navigation, and degraded video startup time across platforms, while spot checks suggest memory is not the main issue.

He proposes two possible causes: unnecessary renders and time spent executing expensive JavaScript functions. A React Native DevTools render profile shows that renders look healthy, so the team moves on to investigate JavaScript execution.

Kh irallah recommends recording a representative user journey: launch the app, focus the Back button, start profiling, navigate to the library and a detail screen, then return and stop the recording. He describes using the Hermes sampling profiler and notes that React Native 0.75's debugger and the release profile package are other profiling options.

In the flame graph, he looks for wide bars with few sub-bars as possible long-running functions, then searches for repeated calls. Because the profiler samples every 10 milliseconds, it may miss individual calls, but frequent appearances can point to a costly pattern. In the example, cleanup functions and a `useSwimLanes` action appear repeatedly.

The profile points to `useCleanupDataInStore`, called from a card's `useEffect` cleanup. Since many cards render on the screen, the cleanup runs repeatedly during navigation. Moving it to the higher-level content component lets it run once during the screen transition.