diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index 03628a6e3bc95..bec6bc2fe9bc4 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -93,10 +93,7 @@ function useContext( context: ReactContext, observedBits: void | number | boolean, ): T { - if (__DEV__) { - // ReactFiberHooks only adds context to the hooks list in DEV. - nextHook(); - } + nextHook(); hookLog.push({ primitive: 'Context', stackError: new Error(), diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index 730ed9435b705..94691e0a825bc 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -431,27 +431,30 @@ describe('ReactHooksInspectionIntegration', () => { // This test case is based on an open source bug report: // facebookincubator/redux-react-hook/issues/34#issuecomment-466693787 it('should properly advance the current hook for useContext', () => { - const MyContext = React.createContext(123); - - let hasInitializedState = false; - const initializeStateOnce = () => { - if (hasInitializedState) { - throw Error( - 'State initialization function should only be called once.', - ); - } - hasInitializedState = true; - return {foo: 'abc'}; - }; + const MyContext = React.createContext(1); + + let incrementCount; function Foo(props) { - React.useContext(MyContext); - const [data] = React.useState(initializeStateOnce); - return
foo: {data.foo}
; + const context = React.useContext(MyContext); + const [data, setData] = React.useState({ count: context }); + + incrementCount = () => setData(data => ({count: data.count + 1 })); + + return
count: {data.count}
; } const renderer = ReactTestRenderer.create(); + expect(renderer.toJSON()).toEqual({ type: 'div', props: {}, children: [ 'count: ', '1' ] }); + + act(incrementCount); + expect(renderer.toJSON()).toEqual({ type: 'div', props: {}, children: [ 'count: ', '2' ] }); + const childFiber = renderer.root._currentFiber(); - ReactDebugTools.inspectHooksOfFiber(childFiber); + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); + expect(tree).toEqual([ + {name: 'Context', value: 1, subHooks: []}, + {name: 'State', value: {count: 2}, subHooks: []}, + ]); }); }); diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index e312b8ee81df0..02f416e808810 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -524,10 +524,7 @@ function mountContext( context: ReactContext, observedBits: void | number | boolean, ): T { - if (__DEV__) { - // If this DEV conditional is ever removed, update ReactDebugHooks useContext too. - mountWorkInProgressHook(); - } + mountWorkInProgressHook(); return readContext(context, observedBits); } @@ -535,10 +532,7 @@ function updateContext( context: ReactContext, observedBits: void | number | boolean, ): T { - if (__DEV__) { - // If this DEV conditional is ever removed, update ReactDebugHooks useContext too. - updateWorkInProgressHook(); - } + updateWorkInProgressHook(); return readContext(context, observedBits); } @@ -1156,7 +1150,7 @@ const HooksDispatcherOnMount: Dispatcher = { readContext, useCallback: mountCallback, - useContext: readContext, + useContext: mountContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, @@ -1171,7 +1165,7 @@ const HooksDispatcherOnUpdate: Dispatcher = { readContext, useCallback: updateCallback, - useContext: readContext, + useContext: updateContext, useEffect: updateEffect, useImperativeHandle: updateImperativeHandle, useLayoutEffect: updateLayoutEffect,