Deprecate context object as a consumer and add a warning message

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -8,6 +8,7 @@
  */
 
 import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
+import lowPriorityWarning from 'shared/lowPriorityWarning';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
@@ -1096,12 +1097,36 @@ function updateContextProvider(
   return workInProgress.child;
 }
 
+let hasWarnedAboutUsingContextAsConsumer = false;
+
 function updateContextConsumer(
   current: Fiber | null,
   workInProgress: Fiber,
   renderExpirationTime: ExpirationTime,
 ) {
-  const context: ReactContext<any> = workInProgress.type;
+  let context: ReactContext<any> = workInProgress.type;
+  // The logic below for Context differs depending on PROD or DEV mode. In
+  // DEV mode, we create a separate object for Context.Consumer that acts
+  // like a proxy to Context. This proxy object adds unecessary code in PROD
+  // so we use the old behaviour (Context.Consumer references Context) to
+  // reduce size and overhead. The separate object references context via
+  // a property called "_context", which also gives us the ability to check
+  // in DEV mode if this property exists or not and warn if it does not.
+  if (__DEV__) {
+    if (workInProgress.type._context === undefined) {
+      if (!hasWarnedAboutUsingContextAsConsumer) {
+        hasWarnedAboutUsingContextAsConsumer = true;
+        lowPriorityWarning(
+          false,
+          'You are using the Context from React.createContext() as a consumer.' +
+            'The correct way is to use Context.Consumer as the consumer instead. ' +
+            'This usage is deprecated and will be removed in a future major release.',
+        );
+      }
+    } else {
+      context = workInProgress.type._context;
+    }
+  }
   const newProps = workInProgress.pendingProps;
   const render = newProps.children;
 

packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js

@@ -1190,12 +1190,12 @@ describe('ReactNewContext', () => {
 
       function FooAndBar() {
         return (
-          <FooContext>
+          <FooContext.Consumer>
             {foo => {
               const bar = BarContext.unstable_read();
               return <Text text={`Foo: ${foo}, Bar: ${bar}`} />;
             }}
-          </FooContext>
+          </FooContext.Consumer>
         );
       }
 
@@ -1558,4 +1558,31 @@ Context fuzz tester error! Copy and paste the following line into the test suite
       }
     });
   });
+
+  it('should warn with an error message when using context as a consumer in DEV', () => {
+    const BarContext = React.createContext({value: 'bar-initial'});
+    const BarConsumer = BarContext;
+
+    function Component() {
+      return (
+        <React.Fragment>
+          <BarContext.Provider value={{value: 'bar-updated'}}>
+            <BarConsumer>
+              {({value}) => <div actual={value} expected="bar-updated" />}
+            </BarConsumer>
+          </BarContext.Provider>
+        </React.Fragment>
+      );
+    }
+
+    expect(() => {
+      ReactNoop.render(<Component />);
+      ReactNoop.flush();
+    }).toLowPriorityWarnDev(
+      'You are using the Context from React.createContext() as a consumer.' +
+        'The correct way is to use Context.Consumer as the consumer instead. ' +
+        'This usage is deprecated and will be removed in a future major release.',
+      {withoutStack: true},
+    );
+  });
 });

packages/react/src/ReactContext.js

@@ -67,7 +67,61 @@ export function createContext<T>(
     $$typeof: REACT_PROVIDER_TYPE,
     _context: context,
   };
-  context.Consumer = context;
+
+  if (__DEV__) {
+    // A separate object, but proxies back to the original context object for
+    // backwards compatibility. It has a different $$typeof, so we can properly
+    // warn for the incorrect usage of Context as a Consumer.
+    const consumer = {
+      $$typeof: REACT_CONTEXT_TYPE,
+      _context: context,
+      Provider: context.Provider,
+    };
+    // $FlowFixMe: Flow complains about not setting a value, which is intentional here
+    Object.defineProperties(consumer, {
+      _calculateChangedBits: {
+        get() {
+          return context._calculateChangedBits;
+        },
+        set(_calculateChangedBits) {
+          context._calculateChangedBits = _calculateChangedBits;
+        },
+      },
+      _currentValue: {
+        get() {
+          return context._currentValue;
+        },
+        set(_currentValue) {
+          context._currentValue = _currentValue;
+        },
+      },
+      _currentValue2: {
+        get() {
+          return context._currentValue2;
+        },
+        set(_currentValue2) {
+          context._currentValue2 = _currentValue2;
+        },
+      },
+      Consumer: {
+        get() {
+          return context.Consumer;
+        },
+      },
+      unstable_read: {
+        get() {
+          return context.unstable_read;
+        },
+        set(unstable_read) {
+          context.unstable_read = unstable_read;
+        },
+      },
+    });
+    // $FlowFixMe: Flow complains about missing properties because it doesn't understand defineProperty
+    context.Consumer = consumer;
+  } else {
+    context.Consumer = context;
+  }
   context.unstable_read = readContext.bind(null, context);
 
   if (__DEV__) {