Added a DevTools store test for component names

packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap

@@ -612,3 +612,15 @@ exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
 [root]
     <Child key="123">
 `;
+
+exports[`Store should show the right display names for special component types 1`] = `
+[root]
+  ▾ <App>
+      <MyComponent>
+      <MyComponent> [ForwardRef]
+      <MyComponent> [Memo]
+    ▾ <MyComponent> [Memo]
+        <MyComponent> [ForwardRef]
+    ▾ <Suspense>
+        <MyComponent>
+`;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -848,4 +848,42 @@ describe('Store', () => {
     act(() => ReactDOM.render([fauxElement], document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
   });
+
+  it('should show the right display names for special component types', async done => {
+    async function fakeImport(result) {
+      return {default: result};
+    }
+
+    const MyComponent = (props, ref) => null;
+    const FowardRefComponent = React.forwardRef(MyComponent);
+    const MemoComponent = React.memo(MyComponent);
+    const MemoForwardRefComponent = React.memo(FowardRefComponent);
+    const LazyComponent = React.lazy(() => fakeImport(MyComponent));
+
+    const App = () => (
+      <React.Fragment>
+        <MyComponent />
+        <FowardRefComponent />
+        <MemoComponent />
+        <MemoForwardRefComponent />
+        <React.Suspense fallback="Loading...">
+          <LazyComponent />
+        </React.Suspense>
+      </React.Fragment>
+    );
+
+    const container = document.createElement('div');
+
+    // Render once to start fetching the lazy component
+    act(() => ReactDOM.render(<App />, container));
+
+    await Promise.resolve();
+
+    // Render again after it resolves
+    act(() => ReactDOM.render(<App />, container));
+
+    expect(store).toMatchSnapshot();
+
+    done();
+  });
 });

packages/react-devtools-shared/src/backend/renderer.js

@@ -331,11 +331,6 @@ export function getInternalReactConstants(
   } = ReactSymbols;
 
   function resolveFiberType(type: any) {
-    // This is to support lazy components with a Promise as the type.
-    // see https://github.com/facebook/react/pull/13397
-    if (typeof type.then === 'function') {
-      return type._reactResult;
-    }
     const typeSymbol = getTypeSymbol(type);
     switch (typeSymbol) {
       case MEMO_NUMBER:

packages/react-devtools-shared/src/devtools/utils.js

@@ -7,6 +7,11 @@
  * @flow
  */
 
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+
 import type {Element} from './views/Components/types';
 import type Store from './store';
 
@@ -21,10 +26,25 @@ export function printElement(element: Element, includeWeight: boolean = false) {
     key = ` key="${element.key}"`;
   }
 
-  let hocs = '';
+  let hocDisplayNames = null;
   if (element.hocDisplayNames !== null) {
-    hocs = ` [${element.hocDisplayNames.join('][')}]`;
+    hocDisplayNames = [...element.hocDisplayNames];
   }
+  if (element.type === ElementTypeMemo) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['Memo'];
+    } else {
+      hocDisplayNames.push('Memo');
+    }
+  } else if (element.type === ElementTypeForwardRef) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['ForwardRef'];
+    } else {
+      hocDisplayNames.push('ForwardRef');
+    }
+  }
+
+  let hocs = hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
 
   let suffix = '';
   if (includeWeight) {