What are the main threads in a React Native app, and how is work distributed among them?

Short answer

This describes the legacy architecture, replaced by the New Architecture as the default since 0.76. The app has three main threads: Main/UI Thread (screen rendering and touch), JS Thread (running logic and React code), and Shadow Thread (calculating element dimensions and positions with Yoga).

Explanation

All JavaScript code runs on the separate JS Thread. When the layout changes, the Shadow Thread performs geometric calculations without blocking the JS Thread, while the Main Thread remains free to handle touch and native rendering unless overloaded with heavy calculations. In the new architecture (Fabric), layout is calculated in C++ and can run synchronously when needed, so the Shadow Thread is no longer separate in the same way.

Code example

import { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";

// JS thread: runs React and your logic
function onPress() {
  setCount((c) => c + 1);                // computes the new state
}

// UI (main) thread: a Reanimated worklet runs here, without waiting for the JS thread
const x = useSharedValue(0);
const style = useAnimatedStyle(() => ({
  transform: [{ translateX: withSpring(x.value) }],
}));

// Under the New Architecture the layout (shadow tree) is computed in C++ and can be driven synchronously
// from the JS thread, while Android also uses a background thread for view-tree preparation.

Common mistakes

• Running heavy synchronous functions in JavaScript and blocking the JS Thread from responding to UI events.

Follow-up questions

• What is Fabric, and how does it differ from the old rendering system in React Native?
• What is the traditional React Native architecture (The Bridge), and what performance bottlenecks are associated with it?

Sources

• React Native docs — Threading Model
• React Native docs — Performance Overview