If you want to be a react native developer and have mastered creating basic android and ios apps, then one of the most important things is to learn the execution process of threads. If you understand how a react native app executes and how many threads it uses that will help you build more efficient apps.
What is a thread?
We can say a thread is a set of instructions to be executed by the CPU. A thread is a component of a process and a process is a program that is running.
Thread Lifecycle:
As we know, JavaScript works asynchronously so interactions with React component’s UI are also handled asynchronously. Basically, the JavaScript thread handles the listening user events, scroll events, etc., and performs DOM manipulation accordingly and this entire process is asynchronous from the main thread and the UI. Then it is further sent to the React Native module thread for DOM and for optimization which is further sent to the main thread queue. The changes are reflected on the UI when the main thread queue is executed.
We will summarize the lifestyle of threads in three stages:
- Threads are stop execution when the app running in the background.
- Threads are starting execution once the app is running in the foreground.
- During the process, when you reload the main JS bundle the threads are killed.
How many threads are in React Native: The React native architecture is based on threads. Basically, there are 4 threads that carry all the operations:
- UI thread
- JS thread
- Native module thread
- Render thread
React native UI Thread (Main thread): This is the main thread that executes synchronous operations. This is also called a UI thread because it is at the end of all of our component hierarchy. This thread carried out data from Shadow Thread. For example, in android, this thread is used for handles android measure/layout/draw events.
JavaScript Thread: JavaScript thread executes React and JavaScript code logic in our app. This thread carried out all DOM hierarchy operations that are straight from the code written by the developers. Once the hierarchy of code is executed, it is sent to the Native module Thread for optimizations and further operations.
React Native Modules Thread: This thread is used when an app needs to access a platform API. For example, if you’re working with animations, you may need to install the native driver to handle your animations.
React Native Render Thread: This thread is only used by Android L (5.0) to draw the UI with OpenGL. This is only used in specific situations, therefore it cannot be included in the main thread. It is fully optional.
Issues in React Native Threads: If you understand the life cycle of these three threads in React Native (JS Thread, UI Thread, and React Native Modules Thread), you have an idea about why you experience performance issues in React Native.
The issues using threads:
- Animations blocking in the JS Thread.
- Because of timeouts or animations, there are slow navigation transitions occur.
- A large amount of space is occupied by DOM.
- Stuttering during a components mounting logic.
Conclusion: You should now be clear about what is thread, how many threads, and how they are playing role in React Native application.