Added context changes to sidebar; fixed a initial-mount detection bug

src/backend/renderer.js

@@ -649,7 +649,7 @@ export function attach(
   }
 
   function getChangeDescription(
-    prevFiber: Fiber,
+    prevFiber: Fiber | null,
     nextFiber: Fiber
   ): ChangeDescription | null {
     switch (getElementTypeForFiber(nextFiber)) {
@@ -657,21 +657,32 @@ export function attach(
       case ElementTypeFunction:
       case ElementTypeMemo:
       case ElementTypeForwardRef:
-        return {
-          didHooksChange: didHooksChange(
-            prevFiber.memoizedState,
-            nextFiber.memoizedState
-          ),
-          context: getContextChangedKeys(nextFiber),
-          props: getChangedKeys(
-            prevFiber.memoizedProps,
-            nextFiber.memoizedProps
-          ),
-          state: getChangedKeys(
-            prevFiber.memoizedState,
-            nextFiber.memoizedState
-          ),
-        };
+        if (prevFiber === null) {
+          return {
+            context: null,
+            didHooksChange: false,
+            isFirstMount: true,
+            props: null,
+            state: null,
+          };
+        } else {
+          return {
+            context: getContextChangedKeys(nextFiber),
+            didHooksChange: didHooksChange(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState
+            ),
+            isFirstMount: false,
+            props: getChangedKeys(
+              prevFiber.memoizedProps,
+              nextFiber.memoizedProps
+            ),
+            state: getChangedKeys(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState
+            ),
+          };
+        }
       default:
         return null;
     }
@@ -1214,13 +1225,12 @@ export function attach(
             actualDuration
           );
 
-          if (recordChangeDescriptions && metadata.changeDescriptions) {
-            const changeDescription =
-              alternate === null
-                ? null
-                : getChangeDescription(alternate, fiber);
+          if (recordChangeDescriptions) {
+            const changeDescription = getChangeDescription(alternate, fiber);
             if (changeDescription !== null) {
-              metadata.changeDescriptions.set(id, changeDescription);
+              if (metadata.changeDescriptions !== null) {
+                metadata.changeDescriptions.set(id, changeDescription);
+              }
             }
 
             updateContextsForFiber(fiber);

src/backend/types.js

@@ -116,6 +116,7 @@ export type ReactRenderer = {
 export type ChangeDescription = {|
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
+  isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
 |};

src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -104,7 +104,10 @@ function WhatChanged({
 
   const changeDescription = changeDescriptions.get(fiberID);
   if (changeDescription == null) {
-    // This indicates that the component mounted during this commit
+    return null;
+  }
+
+  if (changeDescription.isFirstMount) {
     return (
       <div className={styles.Content}>
         <label className={styles.Label}>Why did this render?</label>
@@ -117,6 +120,29 @@ function WhatChanged({
 
   const changes = [];
 
+  if (changeDescription.context === true) {
+    changes.push(
+      <div key="context" className={styles.WhatChangedItem}>
+        • Context changed
+      </div>
+    );
+  } else if (
+    typeof changeDescription.context === 'object' &&
+    changeDescription.context !== null &&
+    changeDescription.context.length !== 0
+  ) {
+    changes.push(
+      <div key="context" className={styles.WhatChangedItem}>
+        • Context changed:
+        {changeDescription.context.map(key => (
+          <span key={key} className={styles.WhatChangedKey}>
+            {key}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
   if (changeDescription.didHooksChange) {
     changes.push(
       <div key="hooks" className={styles.WhatChangedItem}>
@@ -124,6 +150,7 @@ function WhatChanged({
       </div>
     );
   }
+
   if (
     changeDescription.props !== null &&
     changeDescription.props.length !== 0
@@ -139,6 +166,7 @@ function WhatChanged({
       </div>
     );
   }
+
   if (
     changeDescription.state !== null &&
     changeDescription.state.length !== 0

src/devtools/views/Profiler/types.js

@@ -35,6 +35,7 @@ export type SnapshotNode = {|
 export type ChangeDescription = {|
   context: Array<string> | boolean | null,
   didHooksChange: boolean,
+  isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
 |};