Threading Control in Native Modules

In this lesson, you will learn how to move heavy, time-consuming tasks out of the main thread so your React Native app stays buttery smooth during native execution.

The Problem: Blocking the UI

By default, when you trigger a method in a Native Module from JavaScript, it executes on the Main Thread (the UI thread). If that method involves complex calculations, heavy disk I/O, or massive image processing, the UI thread becomes "blocked." Since the UI thread is responsible for responding to user touches and rendering animations, any delay here causes the dreaded "jank" or even freezes your app entirely.

The Solution: Offloading to Background Queues

To keep the UI responsive, you must shift heavy work to a Background Queue (on iOS) or a Background Thread (on Android). Once the background task finishes its heavy lifting, you can then communicate the result back to the JavaScript layer.

Think of it like a restaurant kitchen: The Main Thread is the waiter taking orders at the tables. If the waiter tries to cook the steak themselves, they stop taking orders and the customers get angry. By delegating the cooking to a chef (a background thread), the waiter can keep moving, and the steak is delivered to the table only when it is actually ready.

Practical Example

In your native code, you wrap your logic in a block that dispatches the work elsewhere:

// Objective-C example of offloading work
RCT_EXPORT_METHOD(processHeavyData:(NSDictionary *)data)
{
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    // Heavy calculation happens here, off the main thread!
    NSString *result = [self performComplexMath:data];
    
    // Once finished, send the result back to JS
    [self.bridge.eventDispatcher sendAppEventWithName:@"DataProcessed" body:result];
  });
}

By using dispatch_async (or the equivalent Executor patterns on Android), your module returns control to the bridge immediately, allowing the UI thread to continue rendering frames while your "chef" handles the hard work in the background.

Key Takeaway: Never perform heavy logic directly in a Native Module method; always offload it to a background queue to ensure your UI remains fast and responsive.