ReactDebugHooks useContext() advances hooks list in DEV mode

Author: Brian Vaughn

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -93,6 +93,10 @@ function useContext<T>(
   context: ReactContext<T>,
   observedBits: void | number | boolean,
 ): T {
+  if (__DEV__) {
+    // ReactFiberHooks only adds context to the hooks list in DEV.
+    nextHook();
+  }
   hookLog.push({
     primitive: 'Context',
     stackError: new Error(),

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -427,4 +427,31 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(setterCalls[0]).not.toBe(initial);
     expect(setterCalls[1]).toBe(initial);
   });
+
+  // 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'};
+    };
+
+    function Foo(props) {
+      React.useContext(MyContext);
+      const [data] = React.useState(initializeStateOnce);
+      return <div>foo: {data.foo}</div>;
+    }
+
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root._currentFiber();
+    ReactDebugTools.inspectHooksOfFiber(childFiber);
+  });
 });

packages/react-reconciler/src/ReactFiberHooks.js

@@ -525,6 +525,7 @@ function mountContext<T>(
   observedBits: void | number | boolean,
 ): T {
   if (__DEV__) {
+    // If this DEV conditional is ever removed, update ReactDebugHooks useContext too.
     mountWorkInProgressHook();
   }
   return readContext(context, observedBits);
@@ -535,6 +536,7 @@ function updateContext<T>(
   observedBits: void | number | boolean,
 ): T {
   if (__DEV__) {
+    // If this DEV conditional is ever removed, update ReactDebugHooks useContext too.
     updateWorkInProgressHook();
   }
   return readContext(context, observedBits);