From 9c0205da03560002eb9269fede81cc3b11c70e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@meta.com>
Date: Wed, 29 Jan 2025 06:47:08 -0800
Subject: [PATCH] Add basic benchmarks for rendering views (#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
---
 .../runner/getFantomTestConfig.js             |  2 +-
 .../View/__tests__/View-benchmark-itest.js    | 83 +++++++++++++++++++
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js

diff --git a/packages/react-native-fantom/runner/getFantomTestConfig.js b/packages/react-native-fantom/runner/getFantomTestConfig.js
index 660fe4dcd3d7ce..754832e238b44e 100644
--- a/packages/react-native-fantom/runner/getFantomTestConfig.js
+++ b/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
diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js b/packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js
new file mode 100644
index 00000000000000..35b437e3f5de99
--- /dev/null
+++ b/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();
+      },
+    },
+  );