Always avoid setting default props on View component (remove reduceDefaultPropsInView feature flag) (#52837)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52837

# Changelog
[Internal] -

This feature has been enabled by default for a while, and has been proven to both not cause correctness issues, and also provide tangible performance improvements.

We can remove the corresponding feature flag to improve code maintainability.

Reviewed By: rubennorte

Differential Revision: D78978302

fbshipit-source-id: 45cb865321f6e0eb449427845772fc522221514a

packages/react-native/Libraries/Components/View/View.js

@@ -10,7 +10,6 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import TextAncestorContext from '../../Text/TextAncestorContext';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
@@ -29,183 +28,98 @@ component View(
 ) {
   const hasTextAncestor = use(TextAncestorContext);
 
-  let actualView;
-  if (ReactNativeFeatureFlags.reduceDefaultPropsInView()) {
-    const {
-      accessibilityState,
-      accessibilityValue,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-hidden': ariaHidden,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-live': ariaLive,
-      'aria-selected': ariaSelected,
-      'aria-valuemax': ariaValueMax,
-      'aria-valuemin': ariaValueMin,
-      'aria-valuenow': ariaValueNow,
-      'aria-valuetext': ariaValueText,
-      id,
-      tabIndex,
-      ...otherProps
-    } = props;
+  const {
+    accessibilityState,
+    accessibilityValue,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-live': ariaLive,
+    'aria-selected': ariaSelected,
+    'aria-valuemax': ariaValueMax,
+    'aria-valuemin': ariaValueMin,
+    'aria-valuenow': ariaValueNow,
+    'aria-valuetext': ariaValueText,
+    id,
+    tabIndex,
+    ...otherProps
+  } = props;
 
-    // Since we destructured props, we can now treat it as mutable
-    const processedProps = otherProps as {...ViewProps};
+  // Since we destructured props, we can now treat it as mutable
+  const processedProps = otherProps as {...ViewProps};
 
-    const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
-    if (parsedAriaLabelledBy !== undefined) {
-      processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
-    }
-
-    if (ariaLabel !== undefined) {
-      processedProps.accessibilityLabel = ariaLabel;
-    }
-
-    if (ariaLive !== undefined) {
-      processedProps.accessibilityLiveRegion =
-        ariaLive === 'off' ? 'none' : ariaLive;
-    }
-
-    if (ariaHidden !== undefined) {
-      processedProps.accessibilityElementsHidden = ariaHidden;
-      if (ariaHidden === true) {
-        processedProps.importantForAccessibility = 'no-hide-descendants';
-      }
-    }
-
-    if (id !== undefined) {
-      processedProps.nativeID = id;
-    }
-
-    if (tabIndex !== undefined) {
-      processedProps.focusable = !tabIndex;
-    }
-
-    if (
-      accessibilityState != null ||
-      ariaBusy != null ||
-      ariaChecked != null ||
-      ariaDisabled != null ||
-      ariaExpanded != null ||
-      ariaSelected != null
-    ) {
-      processedProps.accessibilityState = {
-        busy: ariaBusy ?? accessibilityState?.busy,
-        checked: ariaChecked ?? accessibilityState?.checked,
-        disabled: ariaDisabled ?? accessibilityState?.disabled,
-        expanded: ariaExpanded ?? accessibilityState?.expanded,
-        selected: ariaSelected ?? accessibilityState?.selected,
-      };
-    }
-
-    if (
-      accessibilityValue != null ||
-      ariaValueMax != null ||
-      ariaValueMin != null ||
-      ariaValueNow != null ||
-      ariaValueText != null
-    ) {
-      processedProps.accessibilityValue = {
-        max: ariaValueMax ?? accessibilityValue?.max,
-        min: ariaValueMin ?? accessibilityValue?.min,
-        now: ariaValueNow ?? accessibilityValue?.now,
-        text: ariaValueText ?? accessibilityValue?.text,
-      };
-    }
-
-    actualView =
-      ref == null ? (
-        <ViewNativeComponent {...processedProps} />
-      ) : (
-        <ViewNativeComponent {...processedProps} ref={ref} />
-      );
-  } else {
-    const {
-      accessibilityElementsHidden,
-      accessibilityLabel,
-      accessibilityLabelledBy,
-      accessibilityLiveRegion,
-      accessibilityState,
-      accessibilityValue,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-hidden': ariaHidden,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-live': ariaLive,
-      'aria-selected': ariaSelected,
-      'aria-valuemax': ariaValueMax,
-      'aria-valuemin': ariaValueMin,
-      'aria-valuenow': ariaValueNow,
-      'aria-valuetext': ariaValueText,
-      focusable,
-      id,
-      importantForAccessibility,
-      nativeID,
-      tabIndex,
-      ...otherProps
-    } = props;
-    const _accessibilityLabelledBy =
-      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
-
-    const _accessibilityState =
-      accessibilityState != null ||
-      ariaBusy != null ||
-      ariaChecked != null ||
-      ariaDisabled != null ||
-      ariaExpanded != null ||
-      ariaSelected != null
-        ? {
-            busy: ariaBusy ?? accessibilityState?.busy,
-            checked: ariaChecked ?? accessibilityState?.checked,
-            disabled: ariaDisabled ?? accessibilityState?.disabled,
-            expanded: ariaExpanded ?? accessibilityState?.expanded,
-            selected: ariaSelected ?? accessibilityState?.selected,
-          }
-        : undefined;
-
-    const _accessibilityValue =
-      accessibilityValue != null ||
-      ariaValueMax != null ||
-      ariaValueMin != null ||
-      ariaValueNow != null ||
-      ariaValueText != null
-        ? {
-            max: ariaValueMax ?? accessibilityValue?.max,
-            min: ariaValueMin ?? accessibilityValue?.min,
-            now: ariaValueNow ?? accessibilityValue?.now,
-            text: ariaValueText ?? accessibilityValue?.text,
-          }
-        : undefined;
-
-    actualView = (
-      <ViewNativeComponent
-        {...otherProps}
-        accessibilityLiveRegion={
-          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
-        }
-        accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        focusable={tabIndex !== undefined ? !tabIndex : focusable}
-        accessibilityState={_accessibilityState}
-        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
-        accessibilityLabelledBy={_accessibilityLabelledBy}
-        accessibilityValue={_accessibilityValue}
-        importantForAccessibility={
-          ariaHidden === true
-            ? 'no-hide-descendants'
-            : importantForAccessibility
-        }
-        nativeID={id ?? nativeID}
-        ref={ref}
-      />
-    );
+  const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
+  if (parsedAriaLabelledBy !== undefined) {
+    processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
   }
 
+  if (ariaLabel !== undefined) {
+    processedProps.accessibilityLabel = ariaLabel;
+  }
+
+  if (ariaLive !== undefined) {
+    processedProps.accessibilityLiveRegion =
+      ariaLive === 'off' ? 'none' : ariaLive;
+  }
+
+  if (ariaHidden !== undefined) {
+    processedProps.accessibilityElementsHidden = ariaHidden;
+    if (ariaHidden === true) {
+      processedProps.importantForAccessibility = 'no-hide-descendants';
+    }
+  }
+
+  if (id !== undefined) {
+    processedProps.nativeID = id;
+  }
+
+  if (tabIndex !== undefined) {
+    processedProps.focusable = !tabIndex;
+  }
+
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    processedProps.accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
+
+  if (
+    accessibilityValue != null ||
+    ariaValueMax != null ||
+    ariaValueMin != null ||
+    ariaValueNow != null ||
+    ariaValueText != null
+  ) {
+    processedProps.accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
+  }
+
+  const actualView =
+    ref == null ? (
+      <ViewNativeComponent {...processedProps} />
+    ) : (
+      <ViewNativeComponent {...processedProps} ref={ref} />
+    );
+
   if (hasTextAncestor) {
     return (
       <TextAncestorContext value={false}>{actualView}</TextAncestorContext>

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

@@ -828,17 +828,6 @@ const definitions: FeatureFlagDefinitions = {
       },
       ossReleaseStage: 'none',
     },
-    reduceDefaultPropsInView: {
-      defaultValue: true,
-      metadata: {
-        dateAdded: '2025-5-12',
-        description:
-          'Optimize how default (accessibility) props are processed in View to avoid unnecessary keys.',
-        expectedReleaseValue: true,
-        purpose: 'experimentation',
-      },
-      ossReleaseStage: 'none',
-    },
     shouldUseAnimatedObjectForTransform: {
       defaultValue: false,
       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<<4a82f02f08467a26ec38ec44d21484cf>>
+ * @generated SignedSource<<1f567a382688ca9876d17e9ce8d428ff>>
  * @flow strict
  * @noformat
  */
@@ -35,7 +35,6 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
   enableAccessToHostTreeInFabric: Getter<boolean>,
   fixVirtualizeListCollapseWindowSize: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
-  reduceDefaultPropsInView: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
@@ -150,11 +149,6 @@ export const fixVirtualizeListCollapseWindowSize: Getter<boolean> = createJavaSc
  */
 export const isLayoutAnimationEnabled: Getter<boolean> = createJavaScriptFlagGetter('isLayoutAnimationEnabled', true);
 
-/**
- * Optimize how default (accessibility) props are processed in View to avoid unnecessary keys.
- */
-export const reduceDefaultPropsInView: Getter<boolean> = createJavaScriptFlagGetter('reduceDefaultPropsInView', true);
-
 /**
  * Enables use of AnimatedObject for animating transform values.
  */