acoates-ms · rozele · Nov 1, 2023 · Nov 1, 2023
diff --git a/packages/playground/Samples/simple.tsx b/packages/playground/Samples/simple.tsx
@@ -1,21 +1,124 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-import React from 'react';
-import {AppRegistry, View} from 'react-native';
-
-export default class Bootstrap extends React.Component {
-  render() {
-    return (
-      <View
-        accessible={true}
-        style={{borderRadius: 30, width: 60, height: 60, margin: 10}}>
-        <View style={{backgroundColor: 'magenta', width: 60, height: 60}} />
+import React, { memo, useState, useTransition } from 'react';
+import { AppRegistry, Button, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+const styles = StyleSheet.create({
+  tab: {
+    alignItems: 'center',
+  },
+  post: {
+    padding: 5,
+    borderTopWidth: 1,
+    backgroundColor: 'light-gray',
+    alignItems: 'center',
+  },
+  activeTab: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    alignSelf: 'center',
+  },
+  pendingTab: {
+    color: 'gray',
+  },
+
+});
+
+function ContactTab() {
+  return (
+    <View style={styles.tab}>
+      <Text>
+        You can find me online here:
+      </Text>
+      <Text>* [email protected]</Text>
+      <Text>* +123456789</Text>
+    </View>
+  );
+}
+
+function AboutTab() {
+  return (
+    <View style={styles.tab}>
+      <Text>Welcome to my profile!</Text>
+    </View>
+  );
+}
+
+const PostsTab = memo(function PostsTab() {
+  // Log once. The actual slowdown is inside SlowPost.
+  console.log('[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />');
+
+  let items = [];
+  for (let i = 0; i < 500; i++) {
+    items.push(<SlowPost key={i} index={i} />);
+  }
+  return (
+    <ScrollView>
+      {items}
+    </ScrollView>
+  );
+});
+
+function SlowPost({ index }) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return (
+    <TouchableOpacity>
+      <View style={styles.post}>
+        <Text>
+          Post #{index + 1}
+        </Text>
       </View>
-    );
+    </TouchableOpacity>
+  );
+}
+
+function TabButton({ title, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  if (isActive || isPending) {
+    const tabStyle = [styles.activeTab, isPending ? styles.pendingTab : null];
+    return <Text style={tabStyle}>{title}</Text>
+  }
+  return (
+    <Button
+      onPress={() => startTransition(onClick)}
+      title={title} />
+  )
+}
+
+
+export default function App() {
+  const [isPending, startTransition] = useTransition();
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);
+    });
   }
+
+  return (
+    <>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+        <TabButton
+          isActive={tab === 'about'}
+          onClick={() => selectTab('about')}
+          title="About" />
+        <TabButton
+          isActive={tab === 'posts'}
+          onClick={() => selectTab('posts')}
+          title="Posts (slow)" />
+        <TabButton
+          isActive={tab === 'contact'}
+          onClick={() => selectTab('contact')}
+          title="Contact" />
+      </View>
+      {tab === 'about' && <AboutTab />}
+      {tab === 'posts' && <PostsTab />}
+      {tab === 'contact' && <ContactTab />}
+    </>
+  );
 }
 
-AppRegistry.registerComponent('Bootstrap', () => Bootstrap);
+AppRegistry.registerComponent('Bootstrap', () => App);
diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -153,6 +153,8 @@ struct WindowData {
               std::wstring(L"file:").append(workingDir).append(L"\\Bundle\\").c_str());
           host.InstanceSettings().UseDeveloperSupport(true);
 
+          winrt::Microsoft::ReactNative::QuirkSettings::SetUseRuntimeScheduler(host.InstanceSettings(), true);
+
           host.PackageProviders().Append(CreateStubDeviceInfoPackageProvider());
           host.PackageProviders().Append(winrt::make<CompReactPackageProvider>());
           winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.cpp
@@ -288,8 +288,13 @@ void CompositionRootView::ShowInstanceLoaded() noexcept {
 
     auto rootTag = ::Microsoft::ReactNative::getNextRootViewTag();
     SetTag(rootTag);
+    auto initProps = DynamicWriter::ToDynamic(Mso::Copy(m_reactViewOptions.InitialProps()));
+    if (initProps.isNull()) {
+      initProps = folly::dynamic::object();
+    }
+    initProps["concurrentRoot"] = true;
     uiManager->startSurface(
-        *this, rootTag, JSComponentName(), DynamicWriter::ToDynamic(Mso::Copy(m_reactViewOptions.InitialProps())));
+        *this, rootTag, JSComponentName(), initProps);
 
     m_isJSViewAttached = true;
   }

diff --git a/vnext/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp b/vnext/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp
@@ -108,7 +108,15 @@ void FabricUIManager::installFabricUIManager() noexcept {
             facebook::react::ComponentDescriptorParameters{eventDispatcher, contextContainer, nullptr}));
     return registry;
   };
-  toolbox.runtimeExecutor = runtimeExecutor;
+
+  if (auto runtimeScheduler = SchedulerSettings::RuntimeSchedulerFromProperties(m_context.Properties())) {
+    toolbox.runtimeExecutor = [runtimeScheduler](std::function<void(facebook::jsi::Runtime & runtime)> &&callback) {
+      runtimeScheduler->scheduleWork(std::move(callback));
+    };
+  } else {
+    toolbox.runtimeExecutor = runtimeExecutor;
+  }
+
   toolbox.asynchronousEventBeatFactory = asynchronousBeatFactory;
   toolbox.backgroundExecutor = [context = m_context,
                                 dispatcher = Mso::DispatchQueue::MakeLooperQueue()](std::function<void()> &&callback) {

diff --git a/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp b/vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp
@@ -89,7 +89,6 @@
 #include <CreateModules.h>
 #include <Utils/Helpers.h>
 #include <react/renderer/runtimescheduler/RuntimeScheduler.h>
-#include <react/renderer/runtimescheduler/RuntimeSchedulerBinding.h>
 #include "CrashManager.h"
 #include "JsiApi.h"
 #include "ReactCoreInjection.h"
@@ -564,11 +563,15 @@ void ReactInstanceWin::Initialize() noexcept {
             devSettings->useWebSocketTurboModule = winrt::unbox_value_or(useWebSocketTurboModulePropValue, false);
             auto bundleRootPath = devSettings->bundleRootPath;
             auto jsiRuntimeHolder = devSettings->jsiRuntimeHolder;
+            auto instance = strongThis->m_instance.Load();
+            const auto runtimeExecutor = instance->getRuntimeExecutor();
+            const auto runtimeScheduler = std::make_shared<facebook::react::RuntimeScheduler>(runtimeExecutor);
             auto instanceWrapper = facebook::react::CreateReactInstance(
-                std::shared_ptr<facebook::react::Instance>(strongThis->m_instance.Load()),
+                std::move(instance),
                 std::move(bundleRootPath), // bundleRootPath
                 std::move(cxxModules),
                 m_options.TurboModuleProvider,
+                runtimeScheduler,
                 m_options.TurboModuleProvider->LongLivedObjectCollection(),
                 std::make_unique<BridgeUIBatchInstanceCallback>(weakThis),
                 m_jsMessageThread.Load(),
@@ -586,6 +589,7 @@ void ReactInstanceWin::Initialize() noexcept {
                                                   instanceWrapper = m_instanceWrapper.Load(),
                                                   instance = m_instance.Load(),
                                                   turboModuleProvider = m_options.TurboModuleProvider,
+                                                  runtimeScheduler = std::move(runtimeScheduler),
                                                   useWebDebugger = m_options.UseWebDebugger()]() noexcept {
               if (!useWebDebugger) {
 #ifdef USE_FABRIC
@@ -596,12 +600,6 @@ void ReactInstanceWin::Initialize() noexcept {
 
                 if (winrt::Microsoft::ReactNative::implementation::QuirkSettings::GetUseRuntimeScheduler(
                         winrt::Microsoft::ReactNative::ReactPropertyBag(reactContext->Properties()))) {
-                  std::shared_ptr<facebook::react::RuntimeScheduler> runtimeScheduler =
-                      std::make_shared<facebook::react::RuntimeScheduler>(
-                          instanceWrapper->GetInstance()->getRuntimeExecutor());
-
-                  facebook::react::RuntimeSchedulerBinding::createAndInstallIfNeeded(
-                      *jsiRuntimeHolder->getRuntime().get(), runtimeScheduler);
                   Microsoft::ReactNative::SchedulerSettings::SetRuntimeScheduler(
                       ReactPropertyBag(reactContext->Properties()), runtimeScheduler);
                 }

diff --git a/vnext/Microsoft.ReactNative/packages.lock.json b/vnext/Microsoft.ReactNative/packages.lock.json
@@ -24,21 +24,21 @@
           "Microsoft.SourceLink.Common": "1.1.1"
         }
       },
-      "Microsoft.UI.Xaml": {
-        "type": "Direct",
-        "requested": "[2.8.0, )",
-        "resolved": "2.8.0",
-        "contentHash": "vxdHxTr63s5KVtNddMFpgvjBjUH50z7seq/5jLWmmSuf8poxg+sXrywkofUdE8ZstbpO9y3FL/IXXUcPYbeesA==",
-        "dependencies": {
-          "Microsoft.Web.WebView2": "1.0.1264.42"
-        }
-      },
       "Microsoft.Windows.CppWinRT": {
         "type": "Direct",
         "requested": "[2.0.211028.7, )",
         "resolved": "2.0.211028.7",
         "contentHash": "JBGI0c3WLoU6aYJRy9Qo0MLDQfObEp+d4nrhR95iyzf7+HOgjRunHDp/6eGFREd7xq3OI1mll9ecJrMfzBvlyg=="
       },
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
+      },
       "Microsoft.Build.Tasks.Git": {
         "type": "Transitive",
         "resolved": "1.1.1",
@@ -49,10 +49,10 @@
         "resolved": "1.1.1",
         "contentHash": "WMcGpWKrmJmzrNeuaEb23bEMnbtR/vLmvZtkAP5qWu7vQsY59GqfRJd65sFpBszbd2k/bQ8cs8eWawQKAabkVg=="
       },
-      "Microsoft.Web.WebView2": {
+      "Microsoft.Windows.SDK.BuildTools": {
         "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+        "resolved": "10.0.22621.1",
+        "contentHash": "Sp1DkYvg7yxuhamwxv+qFC66KC3paKQpwK8Q1J6XuAh6nzXIInmsDcpJ3szr0XGud4ysXojqwTfGdW01gvZ/0g=="
       },
       "common": {
         "type": "Project"
@@ -76,52 +76,80 @@
       }
     },
     "native,Version=v0.0/win10-arm": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     },
     "native,Version=v0.0/win10-arm-aot": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     },
     "native,Version=v0.0/win10-arm64-aot": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     },
     "native,Version=v0.0/win10-x64": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     },
     "native,Version=v0.0/win10-x64-aot": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     },
     "native,Version=v0.0/win10-x86": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     },
     "native,Version=v0.0/win10-x86-aot": {
-      "Microsoft.Web.WebView2": {
-        "type": "Transitive",
-        "resolved": "1.0.1264.42",
-        "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA=="
+      "Microsoft.WindowsAppSDK": {
+        "type": "Direct",
+        "requested": "[1.4.230913002, )",
+        "resolved": "1.4.230913002",
+        "contentHash": "l+9RshN4TsTuxL0ijFp5smbs3Y07RO7CxKBHNM/RsrsGtWvuk6edITMp4oqL9C3ufEAmpYk3dqOZRSf+sFH4Zg==",
+        "dependencies": {
+          "Microsoft.Windows.SDK.BuildTools": "10.0.22621.1"
+        }
       }
     }
   }