High CPU Usage in React-Native

Viewed 3188

I'm working to reduce the CPU load on an RN app. I've built the app to a device, in release, and trimmed the console logs from the project. Even after doing this the app is still around 33% CPU usage mostly on a blank screen.

The interesting part is that occasionally, about after 6 minutes, the CPU frees up and drops to 3-4%. I suspect that a really long loop has completed but I am unable to find it.

I've run the app in Xcode's Instruments, it's only on iOS atm, and found some interesting things. From the looks of it, it's gotten into a long chain of [CALayer renderInContext] which is coming from UVVideoRecorder. I'm not familiar with UVVideoRecorder and would love to hear any thoughts people might have.

Call Stack + Threads

2 Answers

I suggest using Why Did You Render which will help you track when and why every component re-render ... and hence catch unnecessary re-renders to optimize it....

I think profiling can help you with this. You can get detailed information about work done in the JavaScript thread and main thread side-by-side.

Profiling in React Native - https://reactnative.dev/docs/profiling

Related