Handling threads in React Native and Data Flux

Single-threaded means that a process is designed to have only one thread of execution. This means only one set of instructions executes at once.

Multi-threaded means that a process has two or more threads. So it can execute multiple instructions simultaneously.

As a multi-threaded program, several instructions can run at a time. Let’s pretend this program has two threads. So, the program can run two instructions at a time.

Because React Native is single-threaded, if you have a process that has many responsibilities, you can have performance problems. Imagine you have a process responsible for rendering a video on the screen and a live feed of comments on the video. The video rendering could block the live feed from updating correctly, or the live feed could cause stuttering in the video.

Instead of running multiple threads, React Native runs multiple processes. 3 main processes run in React Native. (Even if they are called threads)

1. UI Thread
2. JS Thread
3. Render Thread / Shadow Tree

If animation run on JS Thread then for each frame the JS Thread will send serialized data on Bridge to the UI Thread. This will result in something similar with real life traffic jam where we have the bridge and the cars(code for each frame).

In addition of this imagine also doing a network request and a dispatch for global state, the JS Thread would be more busy resulting in even more lag.

A very good solution for running animations on UI Thread is react-native-reanimated which also give the opportunity to run any piece of JS code, not only animations.

Imagine having a like animation and a counter. When the like is pressed the counter should increment.

A person using the interface doesn’t know about how data flux is designed, what is a network request. The person just expects the heart to be colored immediately.

As React Native is single-threaded, the best approach is to run animation on UI Thread(color the icon + update the counter) and only when the animation is finished run on JS Thread the rest of the work as updating state and sending a network request. In this way the counter is not waiting for request, the whole interaction is on UI.