Remove _owner field from JSX elements in prod if string refs are disa…

…bled
facebook · Apr 4, 2024 · a15e274 · a15e274
1 parent 6090cab
commit a15e274
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 6 deletions.
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
@@ -6,7 +6,7 @@
  */
 
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
-import {enableRefAsProp} from 'shared/ReactFeatureFlags';
+import {disableStringRefs, enableRefAsProp} from 'shared/ReactFeatureFlags';
 
 import isArray from 'shared/isArray';
 
@@ -54,6 +54,14 @@ function createJSXElementForTestComparison(type, props) {
       value: null,
     });
     return element;
+  } else if (!__DEV__ && disableStringRefs) {
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: type,
+      key: null,
+      ref: null,
+      props: props,
+    };
   } else {
     return {
       $$typeof: REACT_ELEMENT_TYPE,

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -38,6 +38,7 @@ import type {Postpone} from 'react/src/ReactPostpone';
 import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences';
 
 import {
+  disableStringRefs,
   enableBinaryFlight,
   enablePostpone,
   enableRefAsProp,
@@ -498,6 +499,16 @@ function createElement(
       enumerable: false,
       get: nullRefGetter,
     });
+  } else if (!__DEV__ && disableStringRefs) {
+    element = ({
+      // This tag allows us to uniquely identify this as a React Element
+      $$typeof: REACT_ELEMENT_TYPE,
+
+      type,
+      key,
+      ref: null,
+      props,
+    }: any);
   } else {
     element = ({
       // This tag allows us to uniquely identify this as a React Element

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -32,7 +32,11 @@ import {
   ConcurrentRoot,
   LegacyRoot,
 } from 'react-reconciler/constants';
-import {enableRefAsProp, disableLegacyMode} from 'shared/ReactFeatureFlags';
+import {
+  enableRefAsProp,
+  disableLegacyMode,
+  disableStringRefs,
+} from 'shared/ReactFeatureFlags';
 
 type Container = {
   rootID: string,
@@ -799,6 +803,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         value: null,
       });
       return element;
+    } else if (!__DEV__ && disableStringRefs) {
+      return {
+        $$typeof: REACT_ELEMENT_TYPE,
+        type: type,
+        key: null,
+        ref: null,
+        props: props,
+      };
     } else {
       return {
         $$typeof: REACT_ELEMENT_TYPE,

diff --git a/packages/react/src/__tests__/ReactCreateElement-test.js b/packages/react/src/__tests__/ReactCreateElement-test.js
@@ -275,7 +275,11 @@ describe('ReactCreateElement', () => {
     }
     const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => root.render(React.createElement(Wrapper)));
-    expect(element._owner.stateNode).toBe(instance);
+    if (__DEV__ || !gate(flags => flags.disableStringRefs)) {
+      expect(element._owner.stateNode).toBe(instance);
+    } else {
+      expect('_owner' in element).toBe(false);
+    }
   });
 
   it('merges an additional argument onto the children prop', () => {

diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
@@ -235,6 +235,19 @@ function ReactElement(type, key, _ref, self, source, owner, props) {
         value: null,
       });
     }
+  } else if (!__DEV__ && disableStringRefs) {
+    // In prod, `ref` is a regular property and _owner doesn't exist.
+    element = {
+      // This tag allows us to uniquely identify this as a React Element
+      $$typeof: REACT_ELEMENT_TYPE,
+
+      // Built-in properties that belong on the element
+      type,
+      key,
+      ref,
+
+      props,
+    };
   } else {
     // In prod, `ref` is a regular property. It will be removed in a
     // future release.
@@ -766,7 +779,7 @@ export function cloneAndReplaceKey(oldElement, newKey) {
     enableRefAsProp ? null : oldElement.ref,
     undefined,
     undefined,
-    oldElement._owner,
+    !__DEV__ && disableStringRefs ? undefined : oldElement._owner,
     oldElement.props,
   );
 }
@@ -792,7 +805,7 @@ export function cloneElement(element, config, children) {
   let ref = enableRefAsProp ? null : element.ref;
 
   // Owner will be preserved, unless ref is overridden
-  let owner = element._owner;
+  let owner = !__DEV__ && disableStringRefs ? undefined : element._owner;
 
   if (config != null) {
     if (hasValidRef(config)) {

diff --git a/packages/shared/ReactElementType.js b/packages/shared/ReactElementType.js
@@ -13,7 +13,7 @@ export type ReactElement = {
   key: any,
   ref: any,
   props: any,
-  // ReactFiber
+  // __DEV__ or for string refs
   _owner: any,
 
   // __DEV__