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,