Display hook values for components that only use context

src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -91,6 +91,28 @@ exports[`InspectedElementContext should include updates for nested values that w
 }
 `;
 
+exports[`InspectedElementContext should inspect hooks for components that only use context: 1: Inspected element 2 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "Context",
+      "value": true,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "a": 1,
+    "b": "abc"
+  },
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `
 {
   "id": 2,

src/__tests__/inspectedElementContext-test.js

@@ -856,4 +856,47 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('should inspect hooks for components that only use context', async done => {
+    const Context = React.createContext(true);
+    const Example = () => {
+      const value = React.useContext(Context);
+      return value;
+    };
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example a={1} b="abc" />, container)
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let didFinish = false;
+
+    function Suspender({ target }) {
+      const { getInspectedElement } = React.useContext(InspectedElementContext);
+      const inspectedElement = getInspectedElement(id);
+      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      didFinish = true;
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}
+          >
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>
+        ),
+      false
+    );
+    expect(didFinish).toBe(true);
+
+    done();
+  });
 });

src/backend/renderer.js

@@ -2082,6 +2082,7 @@ export function attach(
     const {
       _debugOwner,
       _debugSource,
+      dependencies,
       stateNode,
       memoizedProps,
       memoizedState,
@@ -2093,7 +2094,7 @@ export function attach(
       (tag === FunctionComponent ||
         tag === SimpleMemoComponent ||
         tag === ForwardRef) &&
-      !!memoizedState;
+      (!!memoizedState || !!dependencies);
 
     const typeSymbol = getTypeSymbol(type);
 

src/backend/types.js

@@ -18,6 +18,7 @@ export type Source = {|
   fileName: string,
   lineNumber: number,
 |};
+
 export type HookType =
   | 'useState'
   | 'useReducer'
@@ -38,6 +39,9 @@ export type Fiber = {|
 
   key: null | string,
 
+  // Dependencies (contexts, events) for this fiber, if it has any
+  dependencies: mixed | null,
+
   elementType: any,
 
   type: any,