Introduce main queue coordinator (facebook#51425)

Summary:
Pull Request resolved: facebook#51425

# Problem

React native's new architecture will allow components to do sync render/events. That means they'll makes synchronous dispatches from main thread to the js thread, to capture the runtime so that they can execute js on the main thread.

But, the js thread already as a bunch of synchronous calls to the main thread. So, if any of those js -> ui sync calls happen concurrently with a synchronous render, the application will deadlock.

This diff is an attempt to mitigate all those deadlocks.

## Context
How js execution from the main thread works:

* Main thread puts a block on the js thread, to capture the js runtime. Main thread is put to sleep.
* Js thread executes "runtime capture block". The runtime is captured for the main thread. The js thread is put to sleep.
* Main thread wakes up, noticing that the runtime is captured. It executes its js code with the captured runtime. Then, it releases the runtime, which wakes up the js thread. Both the main and js thread move on to other tasks.

How synchronous js -> main thread calls work:
* Js thread puts a ui block on the main queue.
* Js thread goes to sleep until that ui block executes on the main thread.

## Deadlock facebook#1
**Main thread**: execute js now:
  * Main thread puts a block on the js queue, to capture the runtime.
 * Main thread then then goes to sleep, waiting for runtime to be captured

**JS thread**: execute ui code synchronously:
* Js thread schedules a block on the ui thread
* Js thread then goes to sleep, waiting for that block to execute.

**Result:** The application deadlocks

| {F1978009555} |  {F1978009612} |

![image](https://github.com/user-attachments/assets/325a62f4-d5b7-492d-a114-efb738556239)

## Deadlock facebook#2
**JS thread**: execute ui code synchronously:
* Js thread schedules a block on the ui thread
* Js thread then goes to sleep waiting for that block to execute.

**Main thread**: execute js now:
* Main thread puts a block on the js queue, to capture the runtime.
* Main thread then then goes to sleep, waiting for runtime to be captured

**Result:** The application deadlocks

|  {F1978009690}  | {F1978009701} |

![image](https://github.com/user-attachments/assets/13a6ea17-a55d-453d-9291-d1c8007ecffa)

# Changes
This diff attempts to fix those deadlocks. How:
* In "execute ui code synchronously" (js thread):
   * Before going to sleep, the js thread schedules the ui work on the main queue, **and** it  posts the ui work to "execute js now".
* In "execute js now" (main thread):
   * This diff makes "execute js now" stateful: it keeps a "pending ui block."
   * Before capturing the runtime, the "execute js now" executes "pending ui work", if it exists.
   * While sleeping waiting for runtime capture, "execute js now" can wake up, and execute "pending ui work." It goes back to sleep afterwards, waiting for runtime capture.

## Mitigation: Deadlock facebook#1
**Main thread**: execute js now:
* Main thread puts a block on the js queue, to capture the runtime.
* Main thread then then goes to sleep, waiting for runtime capture

**JS Thread**: execute ui code synchronously:
* Js thread puts its ui block on the ui queue.
* ***New***: Js thread also posts that ui block to "execute js now". Main thread was sleeping waiting for runtime to be captured. It now wakes up.
* Js thread goes to sleep.

The main thread wakes up in "execute js now":
* Main thread sees that a "pending ui block" is posted. It executes the "pending ui block." The block, also scheduled on the main thread, noops henceforth.
* Main thread goes back to sleep, waiting for runtime capture.
* The js thread wakes up, moves on to the next task.

**Result:** The runtime is captured by the main thread.

| {F1978010383} | {F1978010363} |  {F1978010371} |  {F1978010379} |

![image](https://github.com/user-attachments/assets/f53cb10c-7801-46be-934a-96af7d5f5fab)

## Mitigation: Deadlock facebook#2
**JS Thread**: execute ui code synchronously:
* Js thread puts its ui block on the ui queue.
* ***New***: Js thread also posts that ui block to "execute js now". Main thread was sleeping waiting for runtime to be captured. It now wakes up.
* Js thread goes to sleep.

**Main thread**: execute js now
* Main thread sees that a "pending ui block" is posted. It executes the "pending ui block" immediately. The block, also scheduled on the main thread, noops henceforth.
* Js thread wakes up and moves onto the next task.

**Result:** Main thread captures the runtime.

|  {F1978010525}  |  {F1978010533} |  {F1978010542} |

![image](https://github.com/user-attachments/assets/9e0ca5ef-fab6-4a26-bcca-d79d36624d5d)

Reviewed By: javache

Differential Revision: D74769326

Author: RSNara

packages/react-native/React/Base/RCTUtils.mm

@@ -19,9 +19,12 @@
 #import <CommonCrypto/CommonCrypto.h>
 
 #import <React/RCTUtilsUIOverride.h>
+#import <ReactCommon/RuntimeExecutorSyncUIThreadUtils.h>
 #import "RCTAssert.h"
 #import "RCTLog.h"
 
+using namespace facebook::react;
+
 NSString *const RCTErrorUnspecified = @"EUNSPECIFIED";
 
 // Returns the Path of Home directory
@@ -314,7 +317,12 @@ void RCTUnsafeExecuteOnMainQueueSyncWithError(dispatch_block_t block, NSString *
     return;
   }
 
-  if (facebook::react::ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
+  if (ReactNativeFeatureFlags::enableMainQueueCoordinatorOnIOS()) {
+    unsafeExecuteOnMainThreadSync(block);
+    return;
+  }
+
+  if (ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
     RCTLogError(@"RCTUnsafeExecuteOnMainQueueSync: %@", context);
   }
 
@@ -341,7 +349,12 @@ static void RCTUnsafeExecuteOnMainQueueOnceSync(dispatch_once_t *onceToken, disp
     return;
   }
 
-  if (facebook::react::ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
+  if (ReactNativeFeatureFlags::enableMainQueueCoordinatorOnIOS()) {
+    unsafeExecuteOnMainThreadSync(block);
+    return;
+  }
+
+  if (ReactNativeFeatureFlags::disableMainQueueSyncDispatchIOS()) {
     RCTLogError(@"RCTUnsafeExecuteOnMainQueueOnceSync: Sync dispatches to the main queue can deadlock React Native.");
   }
 

packages/react-native/ReactCommon/runtimeexecutor/React-runtimeexecutor.podspec

@@ -44,4 +44,7 @@ Pod::Spec.new do |s|
                                "DEFINES_MODULE" => "YES" }
 
   s.dependency "React-jsi", version
+  s.dependency "React-featureflags", version
+  add_dependency(s, "React-debug")
+  add_dependency(s, "React-utils", :additional_framework_paths => ["react/utils/platform/ios"])
 end

packages/react-native/ReactCommon/runtimeexecutor/platform/cxx/ReactCommon/RuntimeExecutorSyncUIThreadUtils.h

@@ -24,7 +24,7 @@ void executeSynchronouslyOnSameThread_CAN_DEADLOCK(
 template <typename DataT>
 inline static DataT executeSynchronouslyOnSameThread_CAN_DEADLOCK(
     const RuntimeExecutor& runtimeExecutor,
-    std::function<DataT(jsi::Runtime& runtime)>&& runtimeWork) {
+    std::function<DataT(jsi::Runtime&)>&& runtimeWork) {
   DataT data;
 
   executeSynchronouslyOnSameThread_CAN_DEADLOCK(

packages/react-native/ReactCommon/runtimeexecutor/platform/ios/ReactCommon/RuntimeExecutorSyncUIThreadUtils.h

@@ -24,7 +24,7 @@ void executeSynchronouslyOnSameThread_CAN_DEADLOCK(
 template <typename DataT>
 inline static DataT executeSynchronouslyOnSameThread_CAN_DEADLOCK(
     const RuntimeExecutor& runtimeExecutor,
-    std::function<DataT(jsi::Runtime& runtime)>&& runtimeWork) {
+    std::function<DataT(jsi::Runtime&)>&& runtimeWork) {
   DataT data;
 
   executeSynchronouslyOnSameThread_CAN_DEADLOCK(
@@ -33,4 +33,7 @@ inline static DataT executeSynchronouslyOnSameThread_CAN_DEADLOCK(
 
   return data;
 }
+
+void unsafeExecuteOnMainThreadSync(std::function<void()> work);
+
 } // namespace facebook::react

packages/react-native/ReactCommon/runtimeexecutor/platform/ios/ReactCommon/RuntimeExecutorSyncUIThreadUtils.mm

@@ -5,11 +5,158 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <Foundation/Foundation.h>
+
 #import <ReactCommon/RuntimeExecutorSyncUIThreadUtils.h>
-#include <future>
-#include <thread>
+#import <react/debug/react_native_assert.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
+#import <react/utils/OnScopeExit.h>
+#import <algorithm>
+#import <functional>
+#import <future>
+#import <mutex>
+#import <optional>
+#import <thread>
 
 namespace facebook::react {
+
+namespace {
+class UITask {
+  std::promise<void> _isDone;
+  std::function<void()> _uiWork;
+
+ public:
+  UITask(UITask &&other) = default;
+  UITask &operator=(UITask &&other) = default;
+  UITask(const UITask &) = delete;
+  UITask &operator=(const UITask &) = delete;
+
+  UITask(std::function<void()> uiWork) : _uiWork(std::move(uiWork)) {}
+
+  void operator()()
+  {
+    if (!_uiWork) {
+      return;
+    }
+    OnScopeExit onScopeExit(^{
+      _uiWork = nullptr;
+      _isDone.set_value();
+    });
+    _uiWork();
+  }
+
+  std::future<void> future()
+  {
+    return _isDone.get_future();
+  }
+};
+
+// Protects access to g_uiTask and g_cv.
+std::mutex &g_mutex()
+{
+  static std::mutex mutex;
+  return mutex;
+}
+
+std::condition_variable &g_cv()
+{
+  static std::condition_variable cv;
+  return cv;
+}
+
+std::mutex &g_ticket()
+{
+  static std::mutex ticket;
+  return ticket;
+}
+
+std::optional<UITask> &g_uiTask()
+{
+  static std::optional<UITask> uiTaskQueue;
+  return uiTaskQueue;
+}
+
+// Must be called holding g_mutex();
+bool hasUITask()
+{
+  return g_uiTask().has_value();
+}
+
+// Must be called holding g_mutex();
+UITask takeUITask()
+{
+  react_native_assert(hasUITask());
+  auto uiTask = std::move(*g_uiTask());
+  g_uiTask() = std::nullopt;
+  return uiTask;
+}
+
+// Must be called holding g_mutex();
+UITask &postUITask(std::function<void()> &&uiWork)
+{
+  react_native_assert(!hasUITask());
+  g_uiTask() = UITask(uiWork);
+  g_cv().notify_one();
+  return *g_uiTask();
+}
+
+bool g_isRunningUITask = false;
+void runUITask(UITask &uiTask)
+{
+  react_native_assert([[NSThread currentThread] isMainThread]);
+  g_isRunningUITask = true;
+  OnScopeExit onScopeExit([]() { g_isRunningUITask = false; });
+  uiTask();
+}
+
+/**
+ * This method is resilient to multiple javascript threads.
+ * This can happen when multiple react instances interleave.
+ *
+ * The extension from 1 js thread to n: All js threads race to
+ * get a ticket to post a ui task. The first one to get the ticket
+ * will post the ui task, and go to sleep. The cooridnator or
+ * main queue will execute that ui task, waking up the js thread
+ * and releasing that ticket. Another js thread will get the ticket.
+ *
+ * For simplicity, we will just use this algorithm for all bg threads.
+ * Not just the js thread.
+ */
+void saferExecuteSynchronouslyOnSameThread_CAN_DEADLOCK(
+    const RuntimeExecutor &runtimeExecutor,
+    std::function<void(jsi::Runtime &runtime)> &&runtimeWork)
+{
+  react_native_assert([[NSThread currentThread] isMainThread] && !g_isRunningUITask);
+
+  jsi::Runtime *runtime = nullptr;
+  std::promise<void> runtimeWorkDone;
+
+  runtimeExecutor([&runtime, runtimeWorkDoneFuture = runtimeWorkDone.get_future().share()](jsi::Runtime &rt) {
+    {
+      std::lock_guard<std::mutex> lock(g_mutex());
+      runtime = &rt;
+      g_cv().notify_one();
+    }
+
+    runtimeWorkDoneFuture.wait();
+  });
+
+  while (true) {
+    std::unique_lock<std::mutex> lock(g_mutex());
+    g_cv().wait(lock, [&] { return runtime != nullptr || hasUITask(); });
+    if (runtime != nullptr) {
+      break;
+    }
+
+    auto uiTask = takeUITask();
+    lock.unlock();
+    runUITask(uiTask);
+  }
+
+  OnScopeExit onScopeExit([&]() { runtimeWorkDone.set_value(); });
+  runtimeWork(*runtime);
+}
+
 /*
  * Schedules `runtimeWork` to be executed on the same thread using the
  * `RuntimeExecutor`, and blocks on its completion.
@@ -26,7 +173,7 @@
  * - [JS thread] Signal runtime capture block is finished:
  *               resolve(runtimeCaptureBlockDone);
  */
-void executeSynchronouslyOnSameThread_CAN_DEADLOCK(
+void legacyExecuteSynchronouslyOnSameThread_CAN_DEADLOCK(
     const RuntimeExecutor &runtimeExecutor,
     std::function<void(jsi::Runtime &)> &&runtimeWork)
 {
@@ -58,4 +205,54 @@ void executeSynchronouslyOnSameThread_CAN_DEADLOCK(
   runtimeCaptureBlockDone.get_future().wait();
 }
 
+} // namespace
+
+void executeSynchronouslyOnSameThread_CAN_DEADLOCK(
+    const RuntimeExecutor &runtimeExecutor,
+    std::function<void(jsi::Runtime &)> &&runtimeWork)
+{
+  if (ReactNativeFeatureFlags::enableMainQueueCoordinatorOnIOS()) {
+    saferExecuteSynchronouslyOnSameThread_CAN_DEADLOCK(runtimeExecutor, std::move(runtimeWork));
+  } else {
+    legacyExecuteSynchronouslyOnSameThread_CAN_DEADLOCK(runtimeExecutor, std::move(runtimeWork));
+  }
+}
+
+/**
+ * This method is resilient to multiple javascript threads.
+ * This can happen when multiple react instances interleave.
+ *
+ * The extension from 1 js thread to n: All js threads race to
+ * get a ticket to post a ui task. The first one to get the ticket
+ * will post the ui task, and go to sleep. The cooridnator or
+ * main queue will execute that ui task, waking up the js thread
+ * and releasing that ticket. Another js thread will get the ticket.
+ *
+ * For simplicity, we will just use this method for all bg threads.
+ * Not just the js thread.
+ */
+void unsafeExecuteOnMainThreadSync(std::function<void()> work)
+{
+  std::lock_guard<std::mutex> ticket(g_ticket());
+
+  std::future<void> isDone;
+  {
+    std::lock_guard<std::mutex> lock(g_mutex());
+    isDone = postUITask(std::move(work)).future();
+  }
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    std::unique_lock<std::mutex> lock(g_mutex());
+    if (!hasUITask()) {
+      return;
+    }
+
+    auto uiTask = takeUITask();
+    lock.unlock();
+    runUITask(uiTask);
+  });
+
+  isDone.wait();
+}
+
 } // namespace facebook::react