In this lesson, you will learn how React Native uses three distinct threads to keep your application running smoothly and responsively.
Unlike a web page, which runs everything on a single thread, React Native divides the workload into three specialized "lanes." Think of your app as a restaurant:
1. The JavaScript (JS) Thread
This is the "Chef." This thread is where your business logic, state management, and API calls live. When you write a useEffect or define a function to handle a button click, that code executes here. However, the JS thread cannot touch the screen directly; it has to send instructions to the other threads.
2. The UI (Main) Thread
This is the "Waiter." It manages the actual screen. It handles touch events (like a user tapping a button) and performs the rendering of your components. Because it is responsible for the user’s experience, it must stay free. If the UI thread gets "blocked" (e.g., trying to do heavy math), the app will stutter or freeze.
3. The Native Modules Thread
This is the "Specialist." This thread handles tasks that require specific device capabilities, such as accessing the camera, Bluetooth, or the device's storage. Whenever you use a native feature, the JS thread communicates with the Native Modules thread to get the job done.
Why does this matter?
Communication between these threads happens over a "bridge" (or asynchronous messaging). For example, if you change a component’s background color:
// This runs on the JS Thread
const changeColor = () => {
// Logic here happens on the JS thread
// It sends a message across the bridge to the UI thread
setBackgroundColor('blue');
};
If the JS thread is busy performing a massive calculation, it can't send messages to the UI thread. This is why you might experience "jank" or unresponsive buttons—the UI thread is waiting for instructions from the JS thread. Keeping your JS logic lightweight is the secret to a smooth, high-performance app.
Key Takeaway: React Native separates concerns into a JS thread for logic, a UI thread for rendering, and a Native Modules thread for device hardware, requiring them to communicate asynchronously to keep the app responsive.