Upgrade react@beta

examples/reproduction-template-pages/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "next": "canary",
-    "react": "19.0.0-beta-4508873393-20240430",
-    "react-dom": "19.0.0-beta-4508873393-20240430"
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508"
   },
   "devDependencies": {
     "@types/node": "20.4.5",

examples/reproduction-template/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "next": "canary",
-    "react": "19.0.0-beta-4508873393-20240430",
-    "react-dom": "19.0.0-beta-4508873393-20240430"
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508"
   },
   "devDependencies": {
     "@types/node": "20.4.5",

package.json

@@ -120,6 +120,7 @@
     "alex": "9.1.0",
     "amphtml-validator": "1.0.35",
     "async-sema": "3.0.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
     "browserslist": "4.22.2",
     "buffer": "5.6.0",
     "cheerio": "0.22.0",
@@ -196,17 +197,17 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
-    "react": "19.0.0-beta-4508873393-20240430",
+    "react": "19.0.0-beta-04b058868c-20240508",
     "react-17": "npm:[email protected]",
-    "react-builtin": "npm:[email protected]4508873393-20240430",
-    "react-dom": "19.0.0-beta-4508873393-20240430",
+    "react-builtin": "npm:[email protected]04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508",
     "react-dom-17": "npm:[email protected]",
-    "react-dom-builtin": "npm:[email protected]4508873393-20240430",
+    "react-dom-builtin": "npm:[email protected]04b058868c-20240508",
     "react-dom-experimental-builtin": "npm:[email protected]",
     "react-experimental-builtin": "npm:[email protected]",
-    "react-server-dom-turbopack": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-turbopack": "19.0.0-beta-04b058868c-20240508",
     "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-4508873393-20240430",
-    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-webpack": "19.0.0-beta-04b058868c-20240508",
     "react-server-dom-webpack-experimental": "npm:[email protected]",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
@@ -252,9 +253,9 @@
     "@babel/traverse": "7.22.5",
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.23",
-    "react": "19.0.0-beta-4508873393-20240430",
-    "react-dom": "19.0.0-beta-4508873393-20240430",
-    "react-is": "19.0.0-beta-4508873393-20240430",
+    "react": "19.0.0-beta-04b058868c-20240508",
+    "react-dom": "19.0.0-beta-04b058868c-20240508",
+    "react-is": "19.0.0-beta-04b058868c-20240508",
     "scheduler": "0.25.0-beta-94eed63c49-20240425"
   },
   "engines": {

packages/create-next-app/templates/index.ts

@@ -183,8 +183,8 @@ export const installTemplate = async ({
      * Default dependencies.
      */
     dependencies: {
-      react: "19.0.0-beta-4508873393-20240430",
-      "react-dom": "19.0.0-beta-4508873393-20240430",
+      react: "19.0.0-beta-04b058868c-20240508",
+      "react-dom": "19.0.0-beta-04b058868c-20240508",
       next: version,
     },
     devDependencies: {},

packages/next/package.json

@@ -104,10 +104,10 @@
   "peerDependencies": {
     "@opentelemetry/api": "^1.1.0",
     "@playwright/test": "^1.41.2",
-    "babel-plugin-react-compiler": "*",
-    "react": "19.0.0-beta-4508873393-20240430",
-    "react-dom": "19.0.0-beta-4508873393-20240430",
-    "sass": "^1.3.0"
+    "react": "^19.0.0-0",
+    "react-dom": "^19.0.0-0",
+    "sass": "^1.3.0",
+    "babel-plugin-react-compiler": "*"
   },
   "peerDependenciesMeta": {
     "babel-plugin-react-compiler": {

packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js

@@ -12,18 +12,15 @@
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
-
-          'use strict';
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+'use strict';
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
     'function'
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-          var React = require("next/dist/compiled/react");
+var React = require("next/dist/compiled/react");
 var Scheduler = require("next/dist/compiled/scheduler");
 var ReactDOM = require('react-dom');
 
@@ -241,6 +238,7 @@ var REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for('react.debug_trace_mode');
 var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
 var REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
 var REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker');
+var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel');
 var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 var FAUX_ITERATOR_SYMBOL = '@@iterator';
 function getIteratorFn(maybeIterable) {
@@ -8782,6 +8780,11 @@ function extractEvents$1(dispatchQueue, domEventName, maybeTargetInst, nativeEve
       var temp = submitter.ownerDocument.createElement('input');
       temp.name = submitter.name;
       temp.value = submitter.value;
+
+      if (form.id) {
+        temp.setAttribute('form', form.id);
+      }
+
       submitter.parentNode.insertBefore(temp, submitter);
       formData = new FormData(form);
       temp.parentNode.removeChild(temp);
@@ -17386,7 +17389,8 @@ var createFunctionComponentUpdateQueue;
     return {
       lastEffect: null,
       events: null,
-      stores: null
+      stores: null,
+      memoCache: null
     };
   };
 }
@@ -17432,6 +17436,93 @@ function use(usable) {
   throw new Error('An unsupported type was passed to use(): ' + String(usable));
 }
 
+function useMemoCache(size) {
+  var memoCache = null; // Fast-path, load memo cache from wip fiber if already prepared
+
+  var updateQueue = currentlyRenderingFiber$1.updateQueue;
+
+  if (updateQueue !== null) {
+    memoCache = updateQueue.memoCache;
+  } // Otherwise clone from the current fiber
+
+
+  if (memoCache == null) {
+    var current = currentlyRenderingFiber$1.alternate;
+
+    if (current !== null) {
+      var currentUpdateQueue = current.updateQueue;
+
+      if (currentUpdateQueue !== null) {
+        var currentMemoCache = currentUpdateQueue.memoCache;
+
+        if (currentMemoCache != null) {
+          memoCache = {
+            // When enableNoCloningMemoCache is enabled, instead of treating the
+            // cache as copy-on-write, like we do with fibers, we share the same
+            // cache instance across all render attempts, even if the component
+            // is interrupted before it commits.
+            //
+            // If an update is interrupted, either because it suspended or
+            // because of another update, we can reuse the memoized computations
+            // from the previous attempt. We can do this because the React
+            // Compiler performs atomic writes to the memo cache, i.e. it will
+            // not record the inputs to a memoization without also recording its
+            // output.
+            //
+            // This gives us a form of "resuming" within components and hooks.
+            //
+            // This only works when updating a component that already mounted.
+            // It has no impact during initial render, because the memo cache is
+            // stored on the fiber, and since we have not implemented resuming
+            // for fibers, it's always a fresh memo cache, anyway.
+            //
+            // However, this alone is pretty useful — it happens whenever you
+            // update the UI with fresh data after a mutation/action, which is
+            // extremely common in a Suspense-driven (e.g. RSC or Relay) app.
+            data: // Clone the memo cache before each render (copy-on-write)
+            currentMemoCache.data.map(function (array) {
+              return array.slice();
+            }),
+            index: 0
+          };
+        }
+      }
+    }
+  } // Finally fall back to allocating a fresh instance of the cache
+
+
+  if (memoCache == null) {
+    memoCache = {
+      data: [],
+      index: 0
+    };
+  }
+
+  if (updateQueue === null) {
+    updateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber$1.updateQueue = updateQueue;
+  }
+
+  updateQueue.memoCache = memoCache;
+  var data = memoCache.data[memoCache.index];
+
+  if (data === undefined) {
+    data = memoCache.data[memoCache.index] = new Array(size);
+
+    for (var i = 0; i < size; i++) {
+      data[i] = REACT_MEMO_CACHE_SENTINEL;
+    }
+  } else if (data.length !== size) {
+    // TODO: consider warning or throwing here
+    {
+      error('Expected a constant size argument for each invocation of useMemoCache. ' + 'The previous cache was allocated with size %s but size %s was requested.', data.length, size);
+    }
+  }
+
+  memoCache.index++;
+  return data;
+}
+
 function basicStateReducer(state, action) {
   // $FlowFixMe[incompatible-use]: Flow doesn't like mixed types
   return typeof action === 'function' ? action(state) : action;
@@ -19230,6 +19321,10 @@ var ContextOnlyDispatcher = {
   ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError;
 }
 
+{
+  ContextOnlyDispatcher.useMemoCache = throwInvalidHookError;
+}
+
 {
   ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError;
   ContextOnlyDispatcher.useFormState = throwInvalidHookError;
@@ -19374,6 +19469,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    HooksDispatcherOnMountInDEV.useMemoCache = useMemoCache;
+  }
+
   {
     HooksDispatcherOnMountInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -19509,6 +19608,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    HooksDispatcherOnMountWithHookTypesInDEV.useMemoCache = useMemoCache;
+  }
+
   {
     HooksDispatcherOnMountWithHookTypesInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -19645,6 +19748,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    HooksDispatcherOnUpdateInDEV.useMemoCache = useMemoCache;
+  }
+
   {
     HooksDispatcherOnUpdateInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -19781,6 +19888,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    HooksDispatcherOnRerenderInDEV.useMemoCache = useMemoCache;
+  }
+
   {
     HooksDispatcherOnRerenderInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -19936,6 +20047,13 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    InvalidNestedHooksDispatcherOnMountInDEV.useMemoCache = function (size) {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
+
   {
     InvalidNestedHooksDispatcherOnMountInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -20093,6 +20211,13 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    InvalidNestedHooksDispatcherOnUpdateInDEV.useMemoCache = function (size) {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
+
   {
     InvalidNestedHooksDispatcherOnUpdateInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -20250,6 +20375,13 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
     };
   }
 
+  {
+    InvalidNestedHooksDispatcherOnRerenderInDEV.useMemoCache = function (size) {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
+
   {
     InvalidNestedHooksDispatcherOnRerenderInDEV.useHostTransitionStatus = useHostTransitionStatus;
 
@@ -35828,7 +35960,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-beta-4508873393-20240430';
+var ReactVersion = '19.0.0-beta-04b058868c-20240508';
 
 // Might add PROFILE later.
 
@@ -37328,14 +37460,13 @@ var foundDevTools = injectIntoDevTools({
 exports.createRoot = createRoot;
 exports.hydrateRoot = hydrateRoot;
 exports.version = ReactVersion;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
     'function'
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
 }
-        
+
   })();
 }