If you want to become a React Native developer and have already mastered building basic Android and iOS apps, one of the most important concepts to learn is the execution process of threads. Understanding how a React Native app executes and how many threads it uses helps you build more efficient, responsive, and high-performance applications.
Thread
A thread is a sequence of instructions that the CPU executes. It is the smallest unit of execution within a program.
- A thread is a component of a process, and a process is a program that is currently running.
- Multiple threads can exist within a single process, allowing different tasks to run simultaneously.
- Threads help improve performance by enabling parallel execution and smoother application behaviour.
Thread Lifecycle
In React Native, JavaScript runs asynchronously to ensure smooth performance and responsive user interfaces. The JavaScript thread handles user interactions and communicates updates to the native side without blocking the UI thread.
- The JavaScript thread listens to user events like clicks and scrolling and processes the required logic asynchronously.
- These updates are sent to the React Native native modules and main thread queue for processing and optimization.
- Once the main thread executes the queue, the changes are applied and reflected in the UI thread, updating the screen.
Three stages of lifestyle of threads
- Threads stop execution when the app is running in the background.
- Threads start execution once the app is running in the foreground.
- During the process, when you reload the main JS bundle, the threads are killed.
Types of threads in React Native
The React native architecture is based on threads. 4 threads that carry all the operations:
- UI thread
- JS thread
- Native module thread
- Render thread
Let's explore what they are in detail.
1. React native UI Thread (Main thread): This is the primary thread responsible for executing synchronous operations and updating the user interface. It is called the UI thread because it directly handles rendering components and displaying changes on the screen.
- This thread receives processed layout data from the Shadow Thread and applies it to the UI.
- It handles platform-specific rendering tasks such as measure, layout, and draw events in Android.
- Any visual updates, animations, or UI changes are finally executed on this thread and shown to the user.
2. JavaScript Thread: The JavaScript Thread is responsible for executing all React and JavaScript logic in a React Native application. It processes the code written by developers and manages the component hierarchy and application behaviour.
- This thread handles React component logic, event handling, and application state updates.
- It creates and manages the component hierarchy based on the written JavaScript code.
- After execution, the processed data is sent to the Native Modules and other threads for optimization and UI rendering.
3. React Native Modules Thread: This is responsible for handling communication between JavaScript and native platform APIs. It allows the app to access native features that are not directly available through JavaScript.
- This thread is used when the app needs to interact with platform-specific APIs, such as camera, storage, or sensors.
- It helps execute native modules and native drivers, especially for tasks like animations.
- Using native modules improves performance and efficiency by offloading heavy work from the JavaScript thread.
4. React Native Render Thread: This is responsible for rendering the UI using OpenGL, mainly on Android devices running Android L (5.0) and above. It helps improve rendering performance by handling graphics separately from the main UI thread.
- This thread is used to draw UI elements using OpenGL for smoother rendering.
- It is mainly used in Android-specific scenarios and is not part of the core thread system.
- The Render Thread is optional and only activated when required for performance optimization.
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.
- 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 the components mounting logic.