React Native's Two Threads: JS and UI

WHY IT EXISTS To prevent long-running JavaScript code from blocking the main UI thread, which would make an application feel frozen and unresponsive. By separating UI manipulation from business logic, React Native can ensure smooth animations and interactions even while React is busy calculating the next state.

THE MENTAL MODEL Think of it as a restaurant with a kitchen and a front-of-house. The JS thread is the kitchen, preparing the "order" by running React code and calculating the next UI state and layout. The UI thread is the front-of-house, delivering the finished dish to the customer by drawing pixels on the screen. They work in parallel, but only the front-of-house staff can interact directly with the customer (the screen).

HOW IT WORKS React Native's renderer uses two primary threads. The JavaScript thread executes your React code, runs the render phase, and calculates layout. The UI thread, often called the main thread, is the only thread that can create and update the native host views. The framework guarantees thread safety by using immutable data structures. Instead of modifying data in place, every update creates new objects, allowing for safe communication and synchronous APIs between the threads.

WHEN TO USE IT This model is fundamental to all React Native apps; you don't choose to use it, but you must understand it to build performant apps. For example, when a user taps a button (a high-priority event), React Native can interrupt a render happening on the JS thread and execute the update synchronously on the UI thread for immediate feedback. For lower-priority events like scrolling, the render continues on the JS thread without blocking user interaction.

WHEN NOT TO USE IT The main footgun is misunderstanding the separation. Never perform long-running, synchronous tasks on the JS thread, as this will block React's entire render cycle and prevent the UI from updating, making the app unresponsive. Offload heavy computations to native modules or use dedicated worker threads if necessary. The UI thread must be kept free to handle user interactions and animations.

ONE CANONICAL EXAMPLE A user is scrolling a long list. While they scroll, React is busy rendering new list items on the JS thread. If the user suddenly taps a "Like" button (a discrete, high-priority event), React Native can pause the list rendering, run the "Like" button's state update and render synchronously on the UI thread to provide instant visual feedback, and then resume rendering the rest of the list on the JS thread.