diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index a27a73527c..afdbb89de0 100644
--- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/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,
diff --git a/src/__tests__/inspectedElementContext-test.js b/src/__tests__/inspectedElementContext-test.js
index 2cf1ed8632..c2594b2931 100644
--- a/src/__tests__/inspectedElementContext-test.js
+++ b/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(, 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(
+
+
+
+
+
+ ),
+ false
+ );
+ expect(didFinish).toBe(true);
+
+ done();
+ });
});
diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index 1de2b36e7e..27bf7b03f4 100644
--- a/src/backend/renderer.js
+++ b/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);
diff --git a/src/backend/types.js b/src/backend/types.js
index 75cd1e11f5..2ceb1b5dc9 100644
--- a/src/backend/types.js
+++ b/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,