Add basic benchmarks for rendering views (facebook#49008)

Summary:

Changelog: [internal]

We're modifying some core APIs in the RN render in following diffs, so this adds a simple benchmark as a safety mechanism to verify those don't regress performance significantly.

Reviewed By: yungsters

Differential Revision: D68772175

packages/react-native-fantom/runner/getFantomTestConfig.js

@@ -47,7 +47,7 @@ const DEFAULT_MODE: FantomTestConfigMode =
 const FANTOM_FLAG_FORMAT = /^(\w+):(\w+)$/;
 
 const FANTOM_BENCHMARK_FILENAME_RE = /[Bb]enchmark-itest\./g;
-const FANTOM_BENCHMARK_SUITE_RE = /\nFantom.unstable_benchmark(\s*)\.suite\(/g;
+const FANTOM_BENCHMARK_SUITE_RE = /\nFantom\.unstable_benchmark(\s*)\.suite\(/g;
 
 /**
  * Extracts the Fantom configuration from the test file, specified as part of

packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ * @fantom_flags enableAccessToHostTreeInFabric:true
+ */
+
+import '../../../../Libraries/Core/InitializeCore.js';
+
+import View from '../View';
+import Fantom from '@react-native/fantom';
+import * as React from 'react';
+
+let root;
+let thousandViews: React.MixedElement;
+
+Fantom.unstable_benchmark
+  .suite('View')
+  .add(
+    'render 100 uncollapsable views',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        let views: React.Node = null;
+        for (let i = 0; i < 100; i++) {
+          views = (
+            <View
+              collapsable={false}
+              id={String(i)}
+              nativeID={String(i)}
+              style={{width: i + 1, height: i + 1}}>
+              {views}
+            </View>
+          );
+        }
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = views;
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
+  )
+  .add(
+    'render 1000 uncollapsable views',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        let views: React.Node = null;
+        for (let i = 0; i < 1000; i++) {
+          views = (
+            <View
+              collapsable={false}
+              id={String(i)}
+              nativeID={String(i)}
+              style={{width: i + 1, height: i + 1}}>
+              {views}
+            </View>
+          );
+        }
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = views;
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
+  );