React Native App how many threads? Execution Model explained

You are a react native developer and have mastered creating basic android and ios apps. And now looking to learn more about under the hood details of react native, then one of the most important thing to learn is the execution model or process model of a react native app. Understanding how a react native app executes and how many threads it use and for what will help you build more efficient apps and/or help debug performance problems.

React Native app How many threads

In a typical react native app, there are either 3/4 main threads - UI thread, JS thread, native module thread, and render thread.

React native UI Thread (Main thread)

This thread is the main UI thread and used for native android or ios ui rendering. For example, in android this thread is used for android measure/layout/draw happens

React Native JS Thread

JS thread or Javascript thread is the thread where your business logic will run - e.g., this is thread where your application javascript code is executed, api calls are made, touch events are processed etc. Updates to native views are batched and sent over to native side at the end of each event loop in the JS thread (and are executed eventually in UI thread).

To maintain good performance, JS thread should be able to send batched updates to UI thread before next frame rendering deadline. For example, iOS display 60 frames per sec and this lead to new frame every 16.67ms. If you do some complex processing in your javascript event loop that leads to UI changes and it takes more than 16.67ms, then UI will appear sluggish.

One exception are the native views that happen completely in UI thread, for example, navigatorIOS or scrollview run completely in UI thread and hence are not blocked due to a slow js thread.

React Native Native Modules Thread

Sometimes an app needs access to platform API, and this happens as part of native module thread.

React Native Render Thread

Only in Android L (5.0), react native render thread is used to generate actual OpenGL commands used to draw your UI.