feat: replace memoized/forwarded raw components as prop values

src/formatter/formatPropValue.js

@@ -2,11 +2,11 @@
 
 import { isPlainObject } from 'is-plain-object';
 import { isValidElement } from 'react';
+import type { Options } from './../options';
+import parseReactElement from './../parser/parseReactElement';
 import formatComplexDataStructure from './formatComplexDataStructure';
 import formatFunction from './formatFunction';
 import formatTreeNode from './formatTreeNode';
-import type { Options } from './../options';
-import parseReactElement from './../parser/parseReactElement';
 
 const escape = (s: string): string => s.replace(/"/g, '"');
 
@@ -53,6 +53,14 @@ const formatPropValue = (
     )}}`;
   }
 
+  // handle forwardRef and memo
+  if (isPlainObject(propValue) && propValue.$$typeof) {
+    return `{${propValue.displayName ||
+      propValue.type?.name ||
+      propValue.render?.name ||
+      'Component'}}`;
+  }
+
   if (propValue instanceof Date) {
     if (isNaN(propValue.valueOf())) {
       return `{new Date(NaN)}`;

src/formatter/formatPropValue.spec.js

@@ -135,4 +135,32 @@ describe('formatPropValue', () => {
 
     expect(formatPropValue(new Map(), false, 0, {})).toBe('{[object Map]}');
   });
+
+  it('should format a memoized React component prop value', () => {
+    const Component = React.memo(function Foo() {
+      return <div />;
+    });
+
+    expect(formatPropValue(Component, false, 0, {})).toBe('{Foo}');
+
+    const Unnamed = React.memo(function() {
+      return <div />;
+    });
+
+    expect(formatPropValue(Unnamed, false, 0, {})).toBe('{Component}');
+  });
+
+  it('should format a forwarded React component prop value', () => {
+    const Component = React.forwardRef(function Foo(props, forwardedRef) {
+      return <div {...props} ref={forwardedRef} />;
+    });
+
+    expect(formatPropValue(Component, false, 0, {})).toBe('{Foo}');
+
+    const Unnamed = React.forwardRef(function(props, forwardedRef) {
+      return <div {...props} ref={forwardedRef} />;
+    });
+
+    expect(formatPropValue(Unnamed, false, 0, {})).toBe('{Component}');
+  });
 });