Threads - jellyfish-tom/TIL GitHub Wiki

React Native right now uses 3 threads:

MAIN/UI Thread — This is the main application thread on which your Android/iOS app is running. The UI of the application can be changed by the Main thread and it has access to it .

Shadow Thread — layout created using React library in React Native can be calculated by this and it is a background thread.

JavaScript Thread — The main Javascript code is executed by this thread.

Instead of running multiple threads, React Native runs multiple processes. 3 main processes run in React Native and 1 process that only runs on Android L (5.0). If you want to create more processes, you can also use the library react-native-threads.

  • UI Thread. This process is used for handling rendering android and ios views.
  • JS Thread. This process is used for handling all of the logic of your react native application.
  • React Native Modules Thread. This happens when an app needs to access a platform API. For example, if you’re working with animations, you may use the native driver to handle your animations.
  • React Native Render Thread. Android L (5.0) only uses this to draw the UI with OpenGL. Because this is only used in specific situations, I will ignore this process moving forward and only write about the main 3.

In React Native, every process has only one thread. Unfortunately, because of this, people often use the terms interchangeably. You’ll notice UI Thread, JS Thread, and React Native Modules Thread are actually all processes, and react-native-threads actually implements multi-processing.

Debugging Processes and Threads in React Native

By understanding these three main processes in React Native (JS Thread, UI Thread, and React Native Modules Thread), you can better understand why you experience performance issues in React Native. Common issues include: Animations blocking the JS Thread. Slow navigation transitions during timeouts or animations. Expensive computations or large data causing the slowness. Stuttering during a components mounting logic. You can solve many animation issues by using the React Native Modules Thread instead of the JS Thread. the React Native Animated API allows you to configure your animations with useNativeDriver: true so the animation does not block the main JS Thread. You can also use the React Native Interaction Manager to fix competing actions (animation and navigation, for example) from causing performance issues by scheduling one action to only start after the other has finished.