What are threads in React Native?

A thread is a series of instructions that the CPU will execute. A process is a running program, and a thread is a component of that process. Threads serve as the foundation of the React Native framework.

Threads in React Native refer to running code in separate JavaScript contexts. Moreover, they facilitate parallel job execution without stopping the main thread, enhancing performance and a more responsive user experience.

Types of threads in React Native

Typically, three main threads in React Native carry out all the operations.

Native UI thread (main thread)

This is the primary thread that performs synchronous operations. This is also known as a UI thread because it sits at the bottom of our component hierarchy. For example, the UI thread handles Android measure/layout/draw events on Android.

Shadow thread (modules thread)

This thread is utilized when an app wants to query a platform API. For example, if you're dealing with animations, you may need to install the Native driver to manage them.

JavaScript thread

The JavaScript thread runs the React and JavaScript code logic. This thread executes all DOM hierarchy actions directly from the developers' code. After performing the code hierarchy, it is sent to the Native module Thread for optimizations and additional actions.

React Native render thread (optional)

Only Android L (5.0) uses this thread to render the UI with OpenGL. This is only used in specific instances. As a result, it can't be included in the main thread. It is entirely optional.

Threading process

Threads stop execution when the app is running in the background, and they start execution once the app is running in the foreground. When you reload the primary JS bundle, the threads are killed during the process.

Considering JavaScript operates asynchronously, interactions with the UI of the React component are likewise handled asynchronously.

The threading process in React Native takes place in a few steps.

1. The JavaScript thread manages the listening user events, scroll events, and so on and executes DOM modification accordingly, remaining asynchronous from the main thread and the UI.

2. Then it is sent to the React Native module thread for DOM and optimization before being routed to the main thread queue.

3. The modifications are reflected on the UI when executing the main thread queue.

Issues in threads

There are a few issues regarding employing threads in React Native framework.

• Long-running tasks on the main thread cause UI freezes or unresponsiveness.

• Animations getting blocked in the JS Thread.

• There are slow navigation transitions occur because of timeouts or animations.

• DOM occupies a large amount of space.

• Stuttering during a components mounting logic.

Conclusion

In short, React Native threads allow processes to perform simultaneously without stopping the main thread. Developers can provide a responsive user interface and enhance performance through effective synchronization and communication. Threads contribute to developing high-performance React Native apps that provide a consistent user experience.