Optimize processBoxShadow with pre-compiled regex patterns (#55825)

Summary:
Pull Request resolved: #55825

changelog: [internal]

Hoist regex patterns to module-level constants to avoid recompiling them on every function call. This optimization targets a hotspot identified via JS sampling profiler.

Benchmark results show 6-7% improvement in "views with large props and styles" tests:
- render 100 views with large props/styles: 9.48ms → 8.89ms (-6.2%)
- render 1500 views with large props/styles: 137.2ms → 127.5ms (-7.0%)

Reviewed By: javache, NickGerleman

Differential Revision: D92153667

fbshipit-source-id: d4cd98d34e968b2cea5a491ede4ed727273708cd

Author: sammy-SC

packages/react-native/Libraries/StyleSheet/processBoxShadow.js

@@ -11,8 +11,15 @@
 import type {ProcessedColorValue} from './processColor';
 import type {BoxShadowValue} from './StyleSheetTypes';
 
+import {enableOptimizedBoxShadowParsing} from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import processColor from './processColor';
 
+// Pre-compiled regex patterns for performance - avoids regex compilation on each call
+const COMMA_SPLIT_REGEX = /,(?![^()]*\))/;
+const WHITESPACE_SPLIT_REGEX = /\s+(?![^(]*\))/;
+const LENGTH_PARSE_REGEX = /^([+-]?\d*\.?\d+)(px)?$/;
+const NEWLINE_REGEX = /\n/g;
+
 export type ParsedBoxShadow = {
   offsetX: number,
   offsetY: number,
@@ -32,7 +39,12 @@ export default function processBoxShadow(
 
   const boxShadowList =
     typeof rawBoxShadows === 'string'
-      ? parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' '))
+      ? parseBoxShadowString(
+          rawBoxShadows.replace(
+            enableOptimizedBoxShadowParsing() ? NEWLINE_REGEX : /\n/g,
+            ' ',
+          ),
+        )
       : rawBoxShadows;
 
   for (const rawBoxShadow of boxShadowList) {
@@ -109,7 +121,9 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
   let result: Array<BoxShadowValue> = [];
 
   for (const rawBoxShadow of rawBoxShadows
-    .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
+    .split(
+      enableOptimizedBoxShadowParsing() ? COMMA_SPLIT_REGEX : /,(?![^()]*\))/,
+    ) // split by comma that is not in parenthesis
     .map(bS => bS.trim())
     .filter(bS => bS !== '')) {
     const boxShadow: BoxShadowValue = {
@@ -123,7 +137,11 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
     let lengthCount = 0;
 
     // split rawBoxShadow string by all whitespaces that are not in parenthesis
-    const args = rawBoxShadow.split(/\s+(?![^(]*\))/);
+    const args = rawBoxShadow.split(
+      enableOptimizedBoxShadowParsing()
+        ? WHITESPACE_SPLIT_REGEX
+        : /\s+(?![^(]*\))/,
+    );
     for (const arg of args) {
       const processedColor = processColor(arg);
       if (processedColor != null) {
@@ -192,6 +210,28 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
 }
 
 function parseLength(length: string): ?number {
+  if (enableOptimizedBoxShadowParsing()) {
+    // Use pre-compiled regex for performance
+    const match = LENGTH_PARSE_REGEX.exec(length);
+
+    if (!match) {
+      return null;
+    }
+
+    const value = parseFloat(match[1]);
+    if (Number.isNaN(value)) {
+      return null;
+    }
+
+    // match[2] is 'px' or undefined
+    // If no unit and value is not 0, return null
+    if (match[2] == null && value !== 0) {
+      return null;
+    }
+
+    return value;
+  }
+
   // matches on args with units like "1.5 5% -80deg"
   const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
   const match = argsWithUnitsRegex.exec(length);

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -1001,6 +1001,17 @@ const definitions: FeatureFlagDefinitions = {
       },
       ossReleaseStage: 'none',
     },
+    enableOptimizedBoxShadowParsing: {
+      defaultValue: false,
+      metadata: {
+        dateAdded: '2026-02-26',
+        description:
+          'Hoists regex patterns to module scope and optimizes parseLength in processBoxShadow for improved performance.',
+        expectedReleaseValue: true,
+        purpose: 'experimentation',
+      },
+      ossReleaseStage: 'none',
+    },
     externalElementInspectionEnabled: {
       defaultValue: true,
       metadata: {

packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<8cd3151384989b1a4e8ec204943e2435>>
+ * @generated SignedSource<<03688450419694f6d3f4fc709df4de9a>>
  * @flow strict
  * @noformat
  */
@@ -33,6 +33,7 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   animatedShouldUseSingleOp: Getter<boolean>,
   deferFlatListFocusChangeRenderUpdate: Getter<boolean>,
   disableMaintainVisibleContentPosition: Getter<boolean>,
+  enableOptimizedBoxShadowParsing: Getter<boolean>,
   externalElementInspectionEnabled: Getter<boolean>,
   fixImageSrcDimensionPropagation: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
@@ -159,6 +160,11 @@ export const deferFlatListFocusChangeRenderUpdate: Getter<boolean> = createJavaS
  */
 export const disableMaintainVisibleContentPosition: Getter<boolean> = createJavaScriptFlagGetter('disableMaintainVisibleContentPosition', false);
 
+/**
+ * Hoists regex patterns to module scope and optimizes parseLength in processBoxShadow for improved performance.
+ */
+export const enableOptimizedBoxShadowParsing: Getter<boolean> = createJavaScriptFlagGetter('enableOptimizedBoxShadowParsing', false);
+
 /**
  * Enable the external inspection API for DevTools to communicate with the Inspector overlay.
  */