Add ctx._context for backwards compat

packages/react-reconciler/src/ReactFiberCacheComponent.js

@@ -69,6 +69,7 @@ export const CacheContext: ReactContext<Cache> = enableCache
       // We don't use Consumer/Provider for Cache components. So we'll cheat.
       Consumer: (null: any),
       Provider: (null: any),
+      _context: (null: any),
       // We'll initialize these at the root.
       _currentValue: (null: any),
       _currentValue2: (null: any),

packages/react-reconciler/src/ReactFiberHostContext.js

@@ -51,6 +51,7 @@ export const HostTransitionContext: ReactContext<TransitionStatus | null> = {
   _threadCount: 0,
   Provider: (null: any),
   Consumer: (null: any),
+  _context: (null: any),
 };
 
 function requiredContext<Value>(c: Value | null): Value {

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

@@ -1341,19 +1341,6 @@ describe('ReactNewContext', () => {
       );
     });
 
-    it('warns when passed a consumer', async () => {
-      const Context = React.createContext(0);
-      function Foo() {
-        return useContext(Context.Consumer);
-      }
-      ReactNoop.render(<Foo />);
-      await expect(async () => await waitForAll([])).toErrorDev(
-        'Calling useContext(Context.Consumer) is not supported, may cause bugs, ' +
-          'and will be removed in a future major release. ' +
-          'Did you mean to call useContext(Context) instead?',
-      );
-    });
-
     // Context consumer bails out on propagating "deep" updates when `value` hasn't changed.
     // However, it doesn't bail out from rendering if the component above it re-rendered anyway.
     // If we bailed out on referential equality, it would be confusing that you

packages/react/src/ReactContext.js

@@ -30,6 +30,8 @@ export function createContext<T>(defaultValue: T): ReactContext<T> {
     // These are circular
     Provider: (null: any),
     Consumer: (null: any),
+    // Temporary for backwards compat
+    _context: (null: any),
   };
 
   context.Provider = context;
@@ -38,6 +40,10 @@ export function createContext<T>(defaultValue: T): ReactContext<T> {
     _context: context,
   };
 
+  // Some tooling (e.g. DevTools) may assume that context.Provider._context === context.
+  // Keep that true for now to avoid excessive breakage.
+  context._context = context;
+
   if (__DEV__) {
     context._currentRenderer = null;
     context._currentRenderer2 = null;

packages/react/src/ReactHooks.js

@@ -71,25 +71,6 @@ export function getCacheForType<T>(resourceType: () => T): T {
 
 export function useContext<T>(Context: ReactContext<T>): T {
   const dispatcher = resolveDispatcher();
-  if (__DEV__) {
-    // TODO: add a more generic warning for invalid values.
-    if ((Context: any)._context !== undefined) {
-      const realContext = (Context: any)._context;
-      // Don't deduplicate because this legitimately causes bugs
-      // and nobody should be using this in existing code.
-      if (realContext.Consumer === Context) {
-        console.error(
-          'Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' +
-            'removed in a future major release. Did you mean to call useContext(Context) instead?',
-        );
-      } else if (realContext.Provider === Context) {
-        console.error(
-          'Calling useContext(Context.Provider) is not supported. ' +
-            'Did you mean to call useContext(Context) instead?',
-        );
-      }
-    }
-  }
   return dispatcher.useContext(Context);
 }
 

packages/shared/ReactTypes.js

@@ -62,6 +62,8 @@ export type ReactContext<T> = {
   // This value may be added by application code
   // to improve DEV tooling display names
   displayName?: string,
+  // Temporary for backwards compat
+  _context: ReactContext<T>,
 };
 
 export type ReactPortal = {