Only anonymous inner functions of memo/forwardRef inherit displayName

Author: Brian Vaughn

packages/react-reconciler/src/__tests__/ReactMemo-test.js

@@ -553,6 +553,24 @@ describe('memo', () => {
       );
     });
 
+    it('should pass displayName to an anonymous inner component so it shows up in component stacks', () => {
+      const MemoComponent = React.memo(props => {
+        return <div {...props} />;
+      });
+      MemoComponent.displayName = 'Memo';
+      MemoComponent.propTypes = {
+        required: PropTypes.string.isRequired,
+      };
+
+      expect(() =>
+        ReactNoop.render(<MemoComponent optional="foo" />),
+      ).toErrorDev(
+        'Warning: Failed prop type: The prop `required` is marked as required in ' +
+          '`Memo`, but its value is `undefined`.\n' +
+          '    in Memo (at **)',
+      );
+    });
+
     it('should honor a outer displayName when wrapped component and memo component set displayName at the same time.', () => {
       function Component(props) {
         return <div {...props} />;

packages/react/src/ReactForwardRef.js

@@ -57,6 +57,17 @@ export function forwardRef<Props, ElementType: React$ElementType>(
       },
       set: function(name) {
         ownName = name;
+
+        // The inner component shouldn't inherit this display name in most cases,
+        // because the component may be used elsewhere.
+        // But it's nice for anonymous functions to inherit the name,
+        // so that our component-stack generation logic will display their frames.
+        // An anonymous function generally suggests a pattern like:
+        //   React.forwardRef((props, ref) => {...});
+        // This kind of inner function is not used elsewhere so the side effect is okay.
+        if (!render.name && !render.displayName) {
+          render.displayName = name;
+        }
       },
     });
   }

packages/react/src/ReactMemo.js

@@ -37,6 +37,17 @@ export function memo<Props>(
       },
       set: function(name) {
         ownName = name;
+
+        // The inner component shouldn't inherit this display name in most cases,
+        // because the component may be used elsewhere.
+        // But it's nice for anonymous functions to inherit the name,
+        // so that our component-stack generation logic will display their frames.
+        // An anonymous function generally suggests a pattern like:
+        //   React.memo((props) => {...});
+        // This kind of inner function is not used elsewhere so the side effect is okay.
+        if (!type.name && !type.displayName) {
+          type.displayName = name;
+        }
       },
     });
   }

packages/react/src/__tests__/forwardRef-test.js

@@ -250,10 +250,38 @@ describe('forwardRef', () => {
   it('should honor a displayName if set on the forwardRef wrapper in warnings', () => {
     const Component = props => <div {...props} />;
 
+    const RefForwardingComponent = React.forwardRef(function Inner(props, ref) {
+      <Component {...props} forwardedRef={ref} />;
+    });
+    RefForwardingComponent.displayName = 'Custom';
+
+    RefForwardingComponent.propTypes = {
+      optional: PropTypes.string,
+      required: PropTypes.string.isRequired,
+    };
+
+    RefForwardingComponent.defaultProps = {
+      optional: 'default',
+    };
+
+    const ref = React.createRef();
+
+    expect(() =>
+      ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
+    ).toErrorDev(
+      'Warning: Failed prop type: The prop `required` is marked as required in ' +
+        '`Custom`, but its value is `undefined`.\n' +
+        '    in Inner (at **)',
+    );
+  });
+
+  it('should pass displayName to an anonymous inner component so it shows up in component stacks', () => {
+    const Component = props => <div {...props} />;
+
     const RefForwardingComponent = React.forwardRef((props, ref) => (
       <Component {...props} forwardedRef={ref} />
     ));
-    RefForwardingComponent.displayName = 'Outer';
+    RefForwardingComponent.displayName = 'Custom';
 
     RefForwardingComponent.propTypes = {
       optional: PropTypes.string,
@@ -270,11 +298,8 @@ describe('forwardRef', () => {
       ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
     ).toErrorDev(
       'Warning: Failed prop type: The prop `required` is marked as required in ' +
-        '`Outer`, but its value is `undefined`.',
-      // There's no component stack in this warning because the inner function is anonymous.
-      // If we wanted to support this (for the Error frames / source location)
-      // we could do this by updating ReactComponentStackFrame.
-      {withoutStack: true},
+        '`Custom`, but its value is `undefined`.\n' +
+        '    in Custom (at **)',
     );
   });