Understanding React Native Architecture in 2024

React Native has evolved significantly since its initial release, with major architectural changes improving performance and developer experience. In this article, we'll explore the core architecture of React Native and understand how it enables native mobile experiences with JavaScript.

The Three-Thread Architecture

At its core, React Native operates on a three-thread model:

1. JavaScript Thread: Where your React/JavaScript code runs
2. Main Thread (UI Thread): The native thread that handles UI rendering
3. Shadow Thread: Responsible for layout calculations using Yoga

Let's explore each of these in detail.

JavaScript Thread

The JavaScript thread is where all your React components, business logic, and state management code runs. This thread:

• Executes your JavaScript application code
• Manages the Virtual DOM
• Handles events and callbacks
• Communicates with native modules

// This code runs on the JavaScript thread
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button onPress={() => setCount(count + 1)} title="Increment" />
    </View>
  );
}