Add Server Context deprecation warning (#27424)

As agreed, we're removing Server Context. This was never official
documented.

We've found that it's not that useful in practice. Often the better
options are:

- Read things off the url or global scope like params or cookies.
- Use the module system for global dependency injection.
- Use `React.cache()` to dedupe multiple things instead of computing
once and passing down.

There are still legit use cases for Server Context but you have to be
very careful not to pass any large data, so in generally we recommend
against it anyway.

Yes, prop drilling is annoying but it's not impossible for the cases
this is needed. I would personally always pick it over Server Context
anyway.

Semantically, Server Context also blocks object deduping due to how it
plays out with Server Components that can't be deduped. This is much
more important feature.

Since it's already in canary along with the rest of RSC, we're adding a
warning for a few versions before removing completely to help migration.

---------

Co-authored-by: Josh Story <josh.c.story@gmail.com>

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -98,6 +98,19 @@ describe('ReactFlight', () => {
     jest.restoreAllMocks();
   });
 
+  function createServerContext(globalName, defaultValue, withStack) {
+    let ctx;
+    expect(() => {
+      ctx = React.createServerContext(globalName, defaultValue);
+    }).toErrorDev(
+      'Server Context is deprecated and will soon be removed. ' +
+        'It was never documented and we have found it not to be useful ' +
+        'enough to warrant the downside it imposes on all apps.',
+      {withoutStack: !withStack},
+    );
+    return ctx;
+  }
+
   function clientReference(value) {
     return Object.defineProperties(
       function () {
@@ -1063,7 +1076,7 @@ describe('ReactFlight', () => {
   describe('ServerContext', () => {
     // @gate enableServerContext
     it('supports basic createServerContext usage', async () => {
-      const ServerContext = React.createServerContext(
+      const ServerContext = createServerContext(
         'ServerContext',
         'hello from server',
       );
@@ -1084,10 +1097,7 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('propagates ServerContext providers in flight', async () => {
-      const ServerContext = React.createServerContext(
-        'ServerContext',
-        'default',
-      );
+      const ServerContext = createServerContext('ServerContext', 'default');
 
       function Foo() {
         return (
@@ -1115,7 +1125,7 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('errors if you try passing JSX through ServerContext value', () => {
-      const ServerContext = React.createServerContext('ServerContext', {
+      const ServerContext = createServerContext('ServerContext', {
         foo: {
           bar: <span>hi this is default</span>,
         },
@@ -1149,10 +1159,7 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('propagates ServerContext and cleans up the providers in flight', async () => {
-      const ServerContext = React.createServerContext(
-        'ServerContext',
-        'default',
-      );
+      const ServerContext = createServerContext('ServerContext', 'default');
 
       function Foo() {
         return (
@@ -1196,10 +1203,7 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('propagates ServerContext providers in flight after suspending', async () => {
-      const ServerContext = React.createServerContext(
-        'ServerContext',
-        'default',
-      );
+      const ServerContext = createServerContext('ServerContext', 'default');
 
       function Foo() {
         return (
@@ -1254,10 +1258,7 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('serializes ServerContext to client', async () => {
-      const ServerContext = React.createServerContext(
-        'ServerContext',
-        'default',
-      );
+      const ServerContext = createServerContext('ServerContext', 'default');
 
       function ClientBar() {
         Scheduler.log('ClientBar');
@@ -1294,16 +1295,13 @@ describe('ReactFlight', () => {
       expect(ReactNoop).toMatchRenderedOutput(<span>hi this is server</span>);
 
       expect(() => {
-        React.createServerContext('ServerContext', 'default');
+        createServerContext('ServerContext', 'default');
       }).toThrow('ServerContext: ServerContext already defined');
     });
 
     // @gate enableServerContext
     it('takes ServerContext from the client for refetching use cases', async () => {
-      const ServerContext = React.createServerContext(
-        'ServerContext',
-        'default',
-      );
+      const ServerContext = createServerContext('ServerContext', 'default');
       function Bar() {
         return <span>{React.useContext(ServerContext)}</span>;
       }
@@ -1323,7 +1321,7 @@ describe('ReactFlight', () => {
       let ServerContext;
       function inlineLazyServerContextInitialization() {
         if (!ServerContext) {
-          ServerContext = React.createServerContext('ServerContext', 'default');
+          ServerContext = createServerContext('ServerContext', 'default');
         }
         return ServerContext;
       }
@@ -1331,7 +1329,7 @@ describe('ReactFlight', () => {
       let ClientContext;
       function inlineContextInitialization() {
         if (!ClientContext) {
-          ClientContext = React.createServerContext('ServerContext', 'default');
+          ClientContext = createServerContext('ServerContext', 'default', true);
         }
         return ClientContext;
       }

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -3321,12 +3321,19 @@ describe('ReactDOMFizzServer', () => {
     let ServerContext;
     function inlineLazyServerContextInitialization() {
       if (!ServerContext) {
-        ServerContext = React.createServerContext('ServerContext', 'default');
+        expect(() => {
+          ServerContext = React.createServerContext('ServerContext', 'default');
+        }).toErrorDev(
+          'Server Context is deprecated and will soon be removed. ' +
+            'It was never documented and we have found it not to be useful ' +
+            'enough to warrant the downside it imposes on all apps.',
+        );
       }
       return ServerContext;
     }
 
     function Foo() {
+      React.useState(); // component stack generation shouldn't reinit
       inlineLazyServerContextInitialization();
       return (
         <>
@@ -5604,7 +5611,15 @@ describe('ReactDOMFizzServer', () => {
   it('basic use(context)', async () => {
     const ContextA = React.createContext('default');
     const ContextB = React.createContext('B');
-    const ServerContext = React.createServerContext('ServerContext', 'default');
+    let ServerContext;
+    expect(() => {
+      ServerContext = React.createServerContext('ServerContext', 'default');
+    }).toErrorDev(
+      'Server Context is deprecated and will soon be removed. ' +
+        'It was never documented and we have found it not to be useful ' +
+        'enough to warrant the downside it imposes on all apps.',
+      {withoutStack: true},
+    );
     function Client() {
       return use(ContextA) + use(ContextB);
     }

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -609,8 +609,22 @@ describe('ReactFlightDOMBrowser', () => {
   });
 
   it('basic use(context)', async () => {
-    const ContextA = React.createServerContext('ContextA', '');
-    const ContextB = React.createServerContext('ContextB', 'B');
+    let ContextA;
+    let ContextB;
+    expect(() => {
+      ContextA = React.createServerContext('ContextA', '');
+      ContextB = React.createServerContext('ContextB', 'B');
+    }).toErrorDev(
+      [
+        'Server Context is deprecated and will soon be removed. ' +
+          'It was never documented and we have found it not to be useful ' +
+          'enough to warrant the downside it imposes on all apps.',
+        'Server Context is deprecated and will soon be removed. ' +
+          'It was never documented and we have found it not to be useful ' +
+          'enough to warrant the downside it imposes on all apps.',
+      ],
+      {withoutStack: true},
+    );
 
     function ServerComponent() {
       return use(ContextA) + use(ContextB);

packages/react/src/ReactServerContext.js

@@ -30,6 +30,13 @@ export function createServerContext<T: ServerContextJSONValue>(
   if (!enableServerContext) {
     throw new Error('Not implemented.');
   }
+  if (__DEV__) {
+    console.error(
+      'Server Context is deprecated and will soon be removed. ' +
+        'It was never documented and we have found it not to be useful ' +
+        'enough to warrant the downside it imposes on all apps.',
+    );
+  }
   let wasDefined = true;
   if (!ContextRegistry[globalName]) {
     wasDefined = false;

packages/shared/ReactServerContextRegistry.js

@@ -9,9 +9,13 @@
 
 import type {ReactServerContext} from 'shared/ReactTypes';
 
-import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
+import {
+  REACT_PROVIDER_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+} from 'shared/ReactSymbols';
+
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {createServerContext} from 'react';
 
 const ContextRegistry = ReactSharedInternals.ContextRegistry;
 
@@ -19,11 +23,55 @@ export function getOrCreateServerContext(
   globalName: string,
 ): ReactServerContext<any> {
   if (!ContextRegistry[globalName]) {
-    ContextRegistry[globalName] = createServerContext(
-      globalName,
-      // $FlowFixMe[incompatible-call] function signature doesn't reflect the symbol value
-      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
-    );
+    const context: ReactServerContext<any> = {
+      $$typeof: REACT_SERVER_CONTEXT_TYPE,
+
+      // As a workaround to support multiple concurrent renderers, we categorize
+      // some renderers as primary and others as secondary. We only expect
+      // there to be two concurrent renderers at most: React Native (primary) and
+      // Fabric (secondary); React DOM (primary) and React ART (secondary).
+      // Secondary renderers store their context values on separate fields.
+      _currentValue: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+      _currentValue2: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+
+      _defaultValue: REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+
+      // Used to track how many concurrent renderers this context currently
+      // supports within in a single renderer. Such as parallel server rendering.
+      _threadCount: 0,
+      // These are circular
+      Provider: (null: any),
+      Consumer: (null: any),
+      _globalName: globalName,
+    };
+
+    context.Provider = {
+      $$typeof: REACT_PROVIDER_TYPE,
+      _context: context,
+    };
+
+    if (__DEV__) {
+      let hasWarnedAboutUsingConsumer;
+      context._currentRenderer = null;
+      context._currentRenderer2 = null;
+      Object.defineProperties(
+        context,
+        ({
+          Consumer: {
+            get() {
+              if (!hasWarnedAboutUsingConsumer) {
+                console.error(
+                  'Consumer pattern is not supported by ReactServerContext',
+                );
+                hasWarnedAboutUsingConsumer = true;
+              }
+              return null;
+            },
+          },
+        }: any),
+      );
+    }
+    ContextRegistry[globalName] = context;
   }
   return ContextRegistry[globalName];
 }