Example using concurrentRoot and startTransition

Author: rozele

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);

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(

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;
   }