Pass ref as normal prop

Author: acdlite

packages/react-client/src/ReactFlightClient.js

@@ -35,7 +35,11 @@ import type {
 
 import type {Postpone} from 'react/src/ReactPostpone';
 
-import {enableBinaryFlight, enablePostpone} from 'shared/ReactFeatureFlags';
+import {
+  enableBinaryFlight,
+  enablePostpone,
+  enableFastJSX,
+} from 'shared/ReactFeatureFlags';
 
 import {
   resolveClientReference,
@@ -468,19 +472,34 @@ function createElement(
   key: mixed,
   props: mixed,
 ): React$Element<any> {
-  const element: any = {
-    // 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: type,
-    key: key,
-    ref: null,
-    props: props,
-
-    // Record the component responsible for creating this element.
-    _owner: null,
-  };
+  const element: any = enableFastJSX
+    ? {
+        // TODO: Remove this field
+        ref: null,
+
+        // 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,
+        props,
+
+        // Record the component responsible for creating this element.
+        _owner: null,
+      }
+    : {
+        // Old behavior. When enableFastJSX is off, `ref` is an extra field.
+        ref: null,
+
+        // Everything else is the same.
+        $$typeof: REACT_ELEMENT_TYPE,
+        type,
+        key,
+        props,
+        _owner: null,
+      };
+
   if (__DEV__) {
     // We don't really need to add any of these but keeping them for good measure.
     // Unfortunately, _store is enumerable in jest matchers so for equality to

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -640,7 +640,9 @@ function setProp(
     case 'suppressHydrationWarning':
     case 'defaultValue': // Reserved
     case 'defaultChecked':
-    case 'innerHTML': {
+    case 'innerHTML':
+    case 'ref': {
+      // TODO: `ref` is pretty common, should we move it up?
       // Noop
       break;
     }
@@ -988,7 +990,8 @@ function setPropOnCustomElement(
     }
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
-    case 'innerHTML': {
+    case 'innerHTML':
+    case 'ref': {
       // Noop
       break;
     }
@@ -2194,6 +2197,7 @@ function diffHydratedCustomComponent(
       case 'defaultValue':
       case 'defaultChecked':
       case 'innerHTML':
+      case 'ref':
         // Noop
         continue;
       case 'dangerouslySetInnerHTML':
@@ -2307,6 +2311,7 @@ function diffHydratedGenericElement(
       case 'defaultValue':
       case 'defaultChecked':
       case 'innerHTML':
+      case 'ref':
         // Noop
         continue;
       case 'dangerouslySetInnerHTML':

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -1226,6 +1226,7 @@ function pushAttribute(
     case 'innerHTML': // Must use dangerouslySetInnerHTML instead.
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
+    case 'ref':
       // Ignored. These are built-in to React on the client.
       return;
     case 'autoFocus':
@@ -3391,6 +3392,7 @@ function pushStartCustomElement(
           break;
         case 'suppressContentEditableWarning':
         case 'suppressHydrationWarning':
+        case 'ref':
           // Ignored. These are built-in to React on the client.
           break;
         case 'className':
@@ -4964,6 +4966,7 @@ function writeStyleResourceAttributeInJS(
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
     case 'style':
+    case 'ref':
       // Ignored
       return;
 
@@ -5157,6 +5160,7 @@ function writeStyleResourceAttributeInAttr(
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
     case 'style':
+    case 'ref':
       // Ignored
       return;
 

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

@@ -186,7 +186,8 @@ function validateProperty(tagName, name, value, eventRegistry) {
       case 'suppressHydrationWarning':
       case 'defaultValue': // Reserved
       case 'defaultChecked':
-      case 'innerHTML': {
+      case 'innerHTML':
+      case 'ref': {
         return true;
       }
       case 'innerText': // Properties

packages/react-dom/src/__tests__/ReactCompositeComponent-test.js

@@ -278,26 +278,48 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
+    function refFn1(ref) {
+      instance1 = ref;
+    }
+
+    function refFn2(ref) {
+      instance2 = ref;
+    }
+
+    function refFn3(ref) {
+      instance3 = ref;
+    }
+
     let instance1;
     let instance2;
     let instance3;
     const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(() => {
-      root.render(<Component ref={ref => (instance1 = ref)} />);
+      root.render(<Component ref={refFn1} />);
     });
-    expect(instance1.props).toEqual({prop: 'testKey'});
+    if (gate(flags => flags.enableFastJSX)) {
+      expect(instance1.props).toEqual({prop: 'testKey', ref: refFn1});
+    } else {
+      expect(instance1.props).toEqual({prop: 'testKey'});
+    }
 
     await act(() => {
-      root.render(
-        <Component ref={ref => (instance2 = ref)} prop={undefined} />,
-      );
+      root.render(<Component ref={refFn2} prop={undefined} />);
     });
-    expect(instance2.props).toEqual({prop: 'testKey'});
+    if (gate(flags => flags.enableFastJSX)) {
+      expect(instance2.props).toEqual({prop: 'testKey', ref: refFn2});
+    } else {
+      expect(instance2.props).toEqual({prop: 'testKey'});
+    }
 
     await act(() => {
-      root.render(<Component ref={ref => (instance3 = ref)} prop={null} />);
+      root.render(<Component ref={refFn3} prop={null} />);
     });
-    expect(instance3.props).toEqual({prop: null});
+    if (gate(flags => flags.enableFastJSX)) {
+      expect(instance3.props).toEqual({prop: null, ref: refFn3});
+    } else {
+      expect(instance3.props).toEqual({prop: null});
+    }
   });
 
   it('should not mutate passed-in props object', async () => {

packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js

@@ -109,6 +109,7 @@ describe('ReactDeprecationWarnings', () => {
     await waitForAll([]);
   });
 
+  // @gate !enableFastJSX
   it('should warn when owner and self are different for string refs', async () => {
     class RefComponent extends React.Component {
       render() {
@@ -140,6 +141,7 @@ describe('ReactDeprecationWarnings', () => {
   });
 
   if (__DEV__) {
+    // @gate !enableFastJSX
     it('should warn when owner and self are different for string refs', async () => {
       class RefComponent extends React.Component {
         render() {

packages/react-dom/src/__tests__/ReactFunctionComponent-test.js

@@ -193,6 +193,7 @@ describe('ReactFunctionComponent', () => {
     );
   });
 
+  // @gate !enableFastJSX
   it('should warn when given a string ref', () => {
     function Indirection(props) {
       return <div>{props.children}</div>;
@@ -226,6 +227,7 @@ describe('ReactFunctionComponent', () => {
     ReactTestUtils.renderIntoDocument(<ParentUsingStringRef />);
   });
 
+  // @gate !enableFastJSX
   it('should warn when given a function ref', () => {
     function Indirection(props) {
       return <div>{props.children}</div>;
@@ -264,6 +266,7 @@ describe('ReactFunctionComponent', () => {
     ReactTestUtils.renderIntoDocument(<ParentUsingFunctionRef />);
   });
 
+  // @gate !enableFastJSX
   it('deduplicates ref warnings based on element or owner', () => {
     // When owner uses JSX, we can use exact line location to dedupe warnings
     class AnonymousParentUsingJSX extends React.Component {
@@ -327,6 +330,7 @@ describe('ReactFunctionComponent', () => {
   // This guards against a regression caused by clearing the current debug fiber.
   // https://github.com/facebook/react/issues/10831
   // @gate !disableLegacyContext || !__DEV__
+  // @gate !enableFastJSX
   it('should warn when giving a function ref with context', () => {
     function Child() {
       return null;

packages/react-dom/src/__tests__/refs-test.js

@@ -418,7 +418,6 @@ describe('ref swapping', () => {
         type: 'div',
         props: {},
         key: null,
-        ref: null,
       });
     });
 
@@ -428,9 +427,10 @@ describe('ref swapping', () => {
         root.render({
           $$typeof: Symbol.for('react.element'),
           type: 'div',
-          props: {},
+          props: {
+            ref: NaN,
+          },
           key: null,
-          ref: undefined,
         });
       });
     }).rejects.toThrow(

packages/react-reconciler/src/ReactChildFiber.js

@@ -36,6 +36,7 @@ import {
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
 import isArray from 'shared/isArray';
 import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
+import {enableFastJSX} from 'shared/ReactFeatureFlags';
 
 import {
   createWorkInProgress,
@@ -145,7 +146,19 @@ function coerceRef(
   current: Fiber | null,
   element: ReactElement,
 ) {
-  const mixedRef = element.ref;
+  let mixedRef;
+  if (enableFastJSX) {
+    // TODO: This is a temporary, intermediate step. When enableFastJSX is on,
+    // we should resolve the `ref` prop during the begin phase of the component
+    // it's attached to (HostComponent, ClassComponent, etc).
+
+    const refProp = element.props.ref;
+    mixedRef = refProp !== undefined ? refProp : null;
+  } else {
+    // Old behavior.
+    mixedRef = element.ref;
+  }
+
   if (
     mixedRef !== null &&
     typeof mixedRef !== 'function' &&

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -111,6 +111,7 @@ import {
   enableAsyncActions,
   enablePostpone,
   enableRenderableContext,
+  enableFastJSX,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -421,6 +422,24 @@ function updateForwardRef(
   const render = Component.render;
   const ref = workInProgress.ref;
 
+  let propsWithoutRef;
+  if (enableFastJSX && 'ref' in nextProps) {
+    // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+    // the props object. This used to happen in the JSX runtime, but now we do
+    // it here.
+    propsWithoutRef = {};
+    for (const key in nextProps) {
+      // Since `ref` should only appear in props via the JSX transform, we can
+      // assume that this is a plain object. So we don't need a
+      // hasOwnProperty check.
+      if (key !== 'ref') {
+        propsWithoutRef[key] = nextProps[key];
+      }
+    }
+  } else {
+    propsWithoutRef = nextProps;
+  }
+
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
   let hasId;
@@ -435,7 +454,7 @@ function updateForwardRef(
       current,
       workInProgress,
       render,
-      nextProps,
+      propsWithoutRef,
       ref,
       renderLanes,
     );
@@ -446,7 +465,7 @@ function updateForwardRef(
       current,
       workInProgress,
       render,
-      nextProps,
+      propsWithoutRef,
       ref,
       renderLanes,
     );
@@ -2095,7 +2114,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
         );
       }
     }
-    if (workInProgress.ref !== null) {
+    if (!enableFastJSX && workInProgress.ref !== null) {
       let info = '';
       const componentName = getComponentNameFromType(Component) || 'Unknown';
       const ownerName = getCurrentFiberOwnerNameInDevOrNull();