Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-native performance monitor

This feels like a silly question, but what do the various numbers mean on react-native performance monitor? I haven't been able to find in the docs.

performance monitor react-native

I understand RAM. What are the others? What do the two separate numbers mean for Views? Is that frames per second? What should I read to in order to become competent on how to use this tool? How reliable is this tool? What benchmarks should I be aiming for?

like image 298
toddmetheny Avatar asked Dec 06 '16 16:12

toddmetheny


People also ask

How do I check my React Native performance?

Open the developer menu on your simulator (Cmd+D for iOS, Cmd+M or Ctrl+M on Android) and click on "Show Perf Monitor". This window shows the frame rate of your UI (native) and JS threads. The closer they are to 60, the better.

What is perf monitor React Native?

Performance Monitoring allows you to gain insight into key performance characteristics within your React Native application. It provides a simple API to track custom trace and HTTP request metrics.

Does React Native support 120 fps?

Description. When running a react native app on a device that has a refresh rate other than 60, react native apps still run at 60 fps. This means that if you have a device like a Samsung Galaxy S20, which runs at 120 fps, every react native app will feel sluggish, slow and underperforming.

Is React Native is good as a performance?

It enables you to build mobile apps for both Android and iOS operating systems. They can work on any device and still use one codebase only. React Native is a perfect technology to save on development costs, yet still have truly native performance and user-experience flexibility.


1 Answers

Thanks @diedu for posting a link (to a post, which has a comment w/ this youtube vid):

Here's a basic list of what each of those things represents.

  • RAM: memory
  • JSC: Javascript heap / memory. Will only be updated as garbage collection occurs.
  • Views: Two numbers. Top number is the number of views on the screen and bottom is the total number of views in the component. Bottom number typically larger but usually indicates you have something that could be improved / refactored.
  • UI: main frames per second
  • JS (not pictured in Q): javascript frames per second. not rendering js but still good to monitor.

Hope this helps someone.

like image 72
toddmetheny Avatar answered Oct 08 '22 20:10

toddmetheny