DevTools should properly report re-renders due to (use)context changes

Author: Brian Vaughn

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

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import typeof ReactTestRenderer from 'react-test-renderer';
+
+describe('Profiler change descriptions', () => {
+  let React;
+  let TestRenderer: ReactTestRenderer;
+  let legacyRender;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    legacyRender = utils.legacyRender;
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+    TestRenderer = utils.requireTestRenderer();
+  });
+
+  it('should identify when context is the reason for an udpate', () => {
+    const Context = React.createContext(0);
+
+    function Child() {
+      const context = React.useContext(Context);
+      return context;
+    }
+
+    const MemoizedChild = React.memo(Child);
+    const ForwardRefChild = React.forwardRef(function ForwardRef(props, ref) {
+      return <Child />;
+    });
+
+    let forceUpdate = null;
+
+    const MemoizedApp = React.memo(function App() {
+      const [val, dispatch] = React.useReducer(x => x + 1, 0);
+
+      forceUpdate = dispatch;
+
+      return (
+        <Context.Provider value={val}>
+          <Child />
+          <MemoizedChild />
+          <ForwardRefChild />
+        </Context.Provider>
+      );
+    });
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => legacyRender(<MemoizedApp />, container));
+    utils.act(() => forceUpdate());
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+
+    let commitData = null;
+
+    function Validator({commitIndex}) {
+      commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+      return null;
+    }
+
+    utils.act(() => {
+      TestRenderer.create(<Validator commitIndex={1} rootID={rootID} />);
+    });
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App> [Memo]
+          ▾ <Context.Provider>
+              <Child>
+              <Child> [Memo]
+            ▾ <ForwardRef> [ForwardRef]
+                <Child>
+    `);
+
+    const childID = store.getElementIDAtIndex(2);
+    const meomizedChildID = store.getElementIDAtIndex(3);
+    const childInsideForwardRefID = store.getElementIDAtIndex(5);
+
+    expect(commitData.changeDescriptions.get(childID)).toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+    expect(commitData.changeDescriptions.get(meomizedChildID))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+    expect(commitData.changeDescriptions.get(childInsideForwardRefID))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+  });
+});

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

@@ -1253,8 +1253,10 @@ export function attach(
 
   function updateContextsForFiber(fiber: Fiber) {
     switch (getElementTypeForFiber(fiber)) {
-      case ElementTypeFunction:
       case ElementTypeClass:
+      case ElementTypeForwardRef:
+      case ElementTypeFunction:
+      case ElementTypeMemo:
         if (idToContextsMap !== null) {
           const id = getFiberIDThrows(fiber);
           const contexts = getContextsForFiber(fiber);
@@ -1292,7 +1294,9 @@ export function attach(
           }
         }
         return [legacyContext, modernContext];
+      case ElementTypeForwardRef:
       case ElementTypeFunction:
+      case ElementTypeMemo:
         const dependencies = fiber.dependencies;
         if (dependencies && dependencies.firstContext) {
           modernContext = dependencies.firstContext;
@@ -1341,7 +1345,9 @@ export function attach(
             }
           }
           break;
+        case ElementTypeForwardRef:
         case ElementTypeFunction:
+        case ElementTypeMemo:
           if (nextModernContext !== NO_CONTEXT) {
             let prevContext = prevModernContext;
             let nextContext = nextModernContext;