RFC #30: React.forwardRef implementation

packages/react-is/src/ReactIs.js

@@ -17,6 +17,7 @@ import {
   REACT_PORTAL_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_STRICT_MODE_TYPE,
+  REACT_FORWARD_REF_TYPE,
 } from 'shared/ReactSymbols';
 
 export function typeOf(object: any) {
@@ -38,6 +39,7 @@ export function typeOf(object: any) {
             switch ($$typeofType) {
               case REACT_CONTEXT_TYPE:
               case REACT_PROVIDER_TYPE:
+              case REACT_FORWARD_REF_TYPE:
                 return $$typeofType;
               default:
                 return $$typeof;
@@ -58,6 +60,7 @@ export const Element = REACT_ELEMENT_TYPE;
 export const Fragment = REACT_FRAGMENT_TYPE;
 export const Portal = REACT_PORTAL_TYPE;
 export const StrictMode = REACT_STRICT_MODE_TYPE;
+export const ForwardRef = REACT_FORWARD_REF_TYPE;
 
 export function isAsyncMode(object: any) {
   return typeOf(object) === REACT_ASYNC_MODE_TYPE;
@@ -84,3 +87,6 @@ export function isPortal(object: any) {
 export function isStrictMode(object: any) {
   return typeOf(object) === REACT_STRICT_MODE_TYPE;
 }
+export function isForwardRef(object: any) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}

packages/react-is/src/__tests__/ReactIs-test.js

@@ -100,4 +100,13 @@ describe('ReactIs', () => {
     expect(ReactIs.isStrictMode(<React.unstable_AsyncMode />)).toBe(false);
     expect(ReactIs.isStrictMode(<div />)).toBe(false);
   });
+
+  it('should identify ref forwarding component', () => {
+    const RefForwardingComponent = React.forwardRef((props, ref) => null);
+    expect(ReactIs.typeOf(<RefForwardingComponent />)).toBe(ReactIs.ForwardRef);
+    expect(ReactIs.isForwardRef(<RefForwardingComponent />)).toBe(true);
+    expect(ReactIs.isForwardRef({type: ReactIs.StrictMode})).toBe(false);
+    expect(ReactIs.isForwardRef(<React.unstable_AsyncMode />)).toBe(false);
+    expect(ReactIs.isForwardRef(<div />)).toBe(false);
+  });
 });

packages/react-reconciler/src/ReactChildFiber.js

@@ -19,6 +19,7 @@ import {
   REACT_ELEMENT_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_PORTAL_TYPE,
+  REACT_FORWARD_REF_TYPE,
 } from 'shared/ReactSymbols';
 import {
   FunctionalComponent,
@@ -466,6 +467,26 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     if (typeof newChild === 'object' && newChild !== null) {
+      if (
+        typeof newChild.type === 'object' &&
+        newChild.type !== null &&
+        newChild.type.$$typeof === REACT_FORWARD_REF_TYPE
+      ) {
+        const renderFn = newChild.type.renderFn;
+        invariant(
+          typeof renderFn === 'function',
+          'forwardRef requires a render function but was given %s.%s',
+          renderFn === null ? 'null' : typeof renderFn,
+          ReactDebugCurrentFiber.getCurrentFiberStackAddendum() || '',
+        );
+
+        return createChild(
+          returnFiber,
+          renderFn(newChild.props, newChild.ref),
+          expirationTime,
+        );
+      }
+
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE: {
           const created = createFiberFromElement(
@@ -1128,6 +1149,32 @@ function ChildReconciler(shouldTrackSideEffects) {
       child = child.sibling;
     }
 
+    if (
+      typeof element.type === 'object' &&
+      element.type !== null &&
+      element.type.$$typeof === REACT_FORWARD_REF_TYPE
+    ) {
+      const renderFn = element.type.renderFn;
+      invariant(
+        typeof renderFn === 'function',
+        'forwardRef requires a render function but was given %s.%s',
+        renderFn === null ? 'null' : typeof renderFn,
+        ReactDebugCurrentFiber.getCurrentFiberStackAddendum() || '',
+      );
+
+      const newElement = renderFn(element.props, element.ref);
+      if (newElement == null) {
+        return null;
+      }
+
+      return reconcileSingleElement(
+        returnFiber,
+        currentFirstChild,
+        newElement,
+        expirationTime,
+      );
+    }
+
     if (element.type === REACT_FRAGMENT_TYPE) {
       const created = createFiberFromFragment(
         element.props.children,
@@ -1213,10 +1260,24 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       typeof newChild === 'object' &&
       newChild !== null &&
-      newChild.type === REACT_FRAGMENT_TYPE &&
       newChild.key === null
     ) {
-      newChild = newChild.props.children;
+      if (newChild.type === REACT_FRAGMENT_TYPE) {
+        newChild = newChild.props.children;
+      } else if (
+        typeof newChild.type === 'object' &&
+        newChild.type !== null &&
+        newChild.type.$$typeof === REACT_FORWARD_REF_TYPE
+      ) {
+        const renderFn = newChild.type.renderFn;
+        invariant(
+          typeof renderFn === 'function',
+          'forwardRef requires a render function but was given %s.%s',
+          renderFn === null ? 'null' : typeof renderFn,
+          ReactDebugCurrentFiber.getCurrentFiberStackAddendum() || '',
+        );
+        newChild = renderFn(newChild.props, newChild.ref);
+      }
     }
 
     // Handle object types

packages/react/src/React.js

@@ -24,6 +24,7 @@ import {
   isValidElement,
 } from './ReactElement';
 import {createContext} from './ReactContext';
+import forwardRef from './forwardRef';
 import {
   createElementWithValidation,
   createFactoryWithValidation,
@@ -45,6 +46,7 @@ const React = {
   PureComponent,
 
   createContext,
+  forwardRef,
 
   Fragment: REACT_FRAGMENT_TYPE,
   StrictMode: REACT_STRICT_MODE_TYPE,

packages/react/src/ReactElementValidator.js

@@ -22,6 +22,7 @@ import {
   REACT_ASYNC_MODE_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
+  REACT_FORWARD_REF_TYPE,
 } from 'shared/ReactSymbols';
 import checkPropTypes from 'prop-types/checkPropTypes';
 import warning from 'fbjs/lib/warning';
@@ -297,7 +298,8 @@ export function createElementWithValidation(type, props, children) {
     (typeof type === 'object' &&
       type !== null &&
       (type.$$typeof === REACT_PROVIDER_TYPE ||
-        type.$$typeof === REACT_CONTEXT_TYPE));
+        type.$$typeof === REACT_CONTEXT_TYPE ||
+        type.$$typeof === REACT_FORWARD_REF_TYPE));
 
   // We warn in this case but don't throw. We expect the element creation to
   // succeed and there will likely be errors in render.