Measurement React Native Performance

Photo by Mehdi MeSSrro on Unsplash

I got a task to measure the performance of a specific screen, so I think it will be great if I share it.

Let’s back to the topic, to measure the performance of the application and understand the report result, we should understand how React Native (Old Architecture) works.

How React Native Works

React Native has 3 parallel threads, there are JS Thread, Shadow or Background Thread, and UI Thread.

A step how it works:

1. When we run the react native, the Metro will bundle the react code to the javascript code.
2. After that, when the JS Thread tries to render the home screen page, it will send the message (JSON) including what views to load to the UI Thread through the Bridge.
3. Background Thread (Shadow Thread) will calculate the flexbox layouts and send the result to the UI Thread.

Metro

Acting as a builder, these are the functions:

1. Metro has sub-second reload cycles, that perform hot module reloading.
2. Act as a bundler, Metro combines all of the…