[docs] Use reactStrictMode over custom switch (#20522)

Author: eps1lon

docs/next.config.js

@@ -8,9 +8,17 @@ const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants');
 const workspaceRoot = path.join(__dirname, '../');
 
 /**
- * @type {'legacy' | 'sync' | 'concurrent'}
+ * https://github.com/zeit/next.js/blob/287961ed9142a53f8e9a23bafb2f31257339ea98/packages/next/next-server/server/config.ts#L10
+ * @typedef {'legacy' | 'blocking' | 'concurrent'} ReactRenderMode
+ * legacy - ReactDOM.render(<App />)
+ * legacy-strict - ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, Element)
+ * blocking - ReactDOM.createSyncRoot(Element).render(<App />)
+ * concurrent - ReactDOM.createRoot(Element).render(<App />)
+ * @type {ReactRenderMode | 'legacy-strict'}
  */
 const reactMode = 'legacy';
+// eslint-disable-next-line no-console
+console.log(`Using React '${reactMode}' mode.`);
 
 module.exports = {
   typescript: {
@@ -45,10 +53,6 @@ module.exports = {
     config.resolve.alias['react-dom$'] = 'react-dom/profiling';
     config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
 
-    if (reactMode !== 'legacy') {
-      config.resolve.alias['react-transition-group'] = '@material-ui/react-transition-group';
-    }
-
     // next includes node_modules in webpack externals. Some of those have dependencies
     // on the aliases defined above. If a module is an external those aliases won't be used.
     // We need tell webpack to not consider those packages as externals.
@@ -179,5 +183,7 @@ module.exports = {
         { source: '/api/:rest*', destination: '/api-docs/:rest*' },
       ];
     },
+    reactMode: reactMode.startsWith('legacy') ? 'legacy' : reactMode,
   },
+  reactStrictMode: reactMode === 'legacy-strict',
 };

docs/pages/_app.js

@@ -198,16 +198,6 @@ async function registerServiceWorker() {
   }
 }
 
-// Add the strict mode back once the number of warnings is manageable.
-// We might miss important warnings by keeping the strict mode 🌊🌊🌊.
-const ReactMode =
-  {
-    // createSyncRoot compatible
-    sync: React.StrictMode,
-    // partial createRoot, ConcurrentMode is deprecated
-    concurrent: React.unstable_ConcurrentMode,
-  }[process.env.REACT_MODE] || React.Fragment;
-
 let dependenciesLoaded = false;
 
 function loadDependencies() {
@@ -302,7 +292,7 @@ function AppWrapper(props) {
   }
 
   return (
-    <ReactMode>
+    <React.Fragment>
       <NextHead>
         {fonts.map((font) => (
           <link rel="stylesheet" href={font} key={font} />
@@ -318,7 +308,7 @@ function AppWrapper(props) {
         <LanguageNegotiation />
       </ReduxProvider>
       <GoogleAnalytics key={router.route} />
-    </ReactMode>
+    </React.Fragment>
   );
 }