Fixed debug performance labels for new component types (#12609)

* Added new debug performance tests for AsyncMode, StrictMode, forwardRef, and context provider/consumer components. * Updated performance labels to exclude AsyncMode and StrictMode. * Added labels for forwardRef (and inner function) that mirror DevTools labels.
facebook · Apr 12, 2018 · 5dfbfe9 · 5dfbfe9
1 parent c27a998
commit 5dfbfe9
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 0 deletions.
diff --git a/packages/react-reconciler/src/ReactDebugFiberPerf.js b/packages/react-reconciler/src/ReactDebugFiberPerf.js
@@ -21,6 +21,7 @@ import {
   Fragment,
   ContextProvider,
   ContextConsumer,
+  Mode,
 } from 'shared/ReactTypeOfWork';
 
 type MeasurementPhase =
@@ -175,6 +176,7 @@ const shouldIgnoreFiber = (fiber: Fiber): boolean => {
     case Fragment:
     case ContextProvider:
     case ContextConsumer:
+    case Mode:
       return true;
     default:
       return false;

diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
@@ -161,6 +161,64 @@ describe('ReactDebugFiberPerf', () => {
     expect(getFlameChart()).toMatchSnapshot();
   });
 
+  it('properly displays the forwardRef component in measurements', () => {
+    const AnonymousForwardRef = React.forwardRef((props, ref) => (
+      <Child {...props} ref={ref} />
+    ));
+    const NamedForwardRef = React.forwardRef(function refForwarder(props, ref) {
+      return <Child {...props} ref={ref} />;
+    });
+    function notImportant(props, ref) {
+      return <Child {...props} ref={ref} />;
+    }
+    notImportant.displayName = 'OverriddenName';
+    const DisplayNamedForwardRef = React.forwardRef(notImportant);
+
+    ReactNoop.render(
+      <Parent>
+        <AnonymousForwardRef />
+        <NamedForwardRef />
+        <DisplayNamedForwardRef />
+      </Parent>,
+    );
+    addComment('Mount');
+    ReactNoop.flush();
+
+    expect(getFlameChart()).toMatchSnapshot();
+  });
+
+  it('does not include StrictMode or AsyncMode components in measurements', () => {
+    ReactNoop.render(
+      <React.StrictMode>
+        <Parent>
+          <React.unstable_AsyncMode>
+            <Child />
+          </React.unstable_AsyncMode>
+        </Parent>
+      </React.StrictMode>,
+    );
+    addComment('Mount');
+    ReactNoop.flush();
+
+    expect(getFlameChart()).toMatchSnapshot();
+  });
+
+  it('does not include context provider or consumer in measurements', () => {
+    const {Consumer, Provider} = React.createContext(true);
+
+    ReactNoop.render(
+      <Provider value={false}>
+        <Parent>
+          <Consumer>{value => <Child value={value} />}</Consumer>
+        </Parent>
+      </Provider>,
+    );
+    addComment('Mount');
+    ReactNoop.flush();
+
+    expect(getFlameChart()).toMatchSnapshot();
+  });
+
   it('skips parents during setState', () => {
     class A extends React.Component {
       render() {

diff --git a/...s/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap b/...s/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
@@ -91,6 +91,36 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
 "
 `;
 
+exports[`ReactDebugFiberPerf does not include StrictMode or AsyncMode components in measurements 1`] = `
+"⚛ (Waiting for async callback... will force flush in 5230 ms)
+
+// Mount
+⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Parent [mount]
+    ⚛ Child [mount]
+
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
+"
+`;
+
+exports[`ReactDebugFiberPerf does not include context provider or consumer in measurements 1`] = `
+"⚛ (Waiting for async callback... will force flush in 5230 ms)
+
+// Mount
+⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Parent [mount]
+    ⚛ Child [mount]
+
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
+"
+`;
+
 exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is called during a synchronous commit phase 1`] = `
 "⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Component [mount]
@@ -231,6 +261,26 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
 "
 `;
 
+exports[`ReactDebugFiberPerf properly displays the forwardRef component in measurements 1`] = `
+"⚛ (Waiting for async callback... will force flush in 5230 ms)
+
+// Mount
+⚛ (React Tree Reconciliation: Completed Root)
+  ⚛ Parent [mount]
+    ⚛ ForwardRef [mount]
+      ⚛ Child [mount]
+    ⚛ ForwardRef(refForwarder) [mount]
+      ⚛ Child [mount]
+    ⚛ ForwardRef(OverriddenName) [mount]
+      ⚛ Child [mount]
+
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
+"
+`;
+
 exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
 "⚛ (Waiting for async callback... will force flush in 5230 ms)
 

diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
@@ -14,6 +14,7 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_RETURN_TYPE,
   REACT_PORTAL_TYPE,
+  REACT_FORWARD_REF_TYPE,
 } from 'shared/ReactSymbols';
 
 function getComponentName(fiber: Fiber): string | null {
@@ -34,6 +35,15 @@ function getComponentName(fiber: Fiber): string | null {
     case REACT_RETURN_TYPE:
       return 'ReactReturn';
   }
+  if (typeof type === 'object' && type !== null) {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE:
+        const functionName = type.render.displayName || type.render.name || '';
+        return functionName !== ''
+          ? `ForwardRef(${functionName})`
+          : 'ForwardRef';
+    }
+  }
   return null;
 }