diff --git a/examples/reproduction-template-pages/package.json b/examples/reproduction-template-pages/package.json
index cbb8033510f33a..e4b0d84a6b7496 100644
--- a/examples/reproduction-template-pages/package.json
+++ b/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",
diff --git a/examples/reproduction-template/package.json b/examples/reproduction-template/package.json
index cbb8033510f33a..e4b0d84a6b7496 100644
--- a/examples/reproduction-template/package.json
+++ b/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",
diff --git a/package.json b/package.json
index 01c96043da122d..4045eb4bd4f689 100644
--- a/package.json
+++ b/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:react@17.0.2",
- "react-builtin": "npm:react@19.0.0-beta-4508873393-20240430",
- "react-dom": "19.0.0-beta-4508873393-20240430",
+ "react-builtin": "npm:react@19.0.0-beta-04b058868c-20240508",
+ "react-dom": "19.0.0-beta-04b058868c-20240508",
"react-dom-17": "npm:react-dom@17.0.2",
- "react-dom-builtin": "npm:react-dom@19.0.0-beta-4508873393-20240430",
+ "react-dom-builtin": "npm:react-dom@19.0.0-beta-04b058868c-20240508",
"react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-4508873393-20240430",
"react-experimental-builtin": "npm:react@0.0.0-experimental-4508873393-20240430",
- "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:react-server-dom-webpack@0.0.0-experimental-4508873393-20240430",
"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": {
diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
index 711dd5aac2a5bf..0dc12dd0fde45e 100644
--- a/packages/create-next-app/templates/index.ts
+++ b/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: {},
diff --git a/packages/next/package.json b/packages/next/package.json
index 782537909f6396..dc0ab62492598a 100644
--- a/packages/next/package.json
+++ b/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": {
diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js
index 3e3bcfec9712fb..ff65c3e1b0b703 100644
--- a/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js
+++ b/packages/next/src/compiled/react-dom/cjs/react-dom-client.development.js
@@ -12,10 +12,7 @@
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 ===
@@ -23,7 +20,7 @@ if (
) {
__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,7 +37460,6 @@ 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 ===
@@ -37336,6 +37467,6 @@ if (
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
}
-
+
})();
}
diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js b/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js
index 6faaccc14aeb80..4cf71a4ab89449 100644
--- a/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js
+++ b/packages/next/src/compiled/react-dom/cjs/react-dom-client.production.js
@@ -55,7 +55,8 @@ Symbol.for("react.debug_trace_mode");
var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
Symbol.for("react.legacy_hidden");
Symbol.for("react.tracing_marker");
-var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"),
+ MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
function getIteratorFn(maybeIterable) {
if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
maybeIterable =
@@ -2289,6 +2290,8 @@ function extractEvents$1(
var temp = submitter.ownerDocument.createElement("input");
temp.name = submitter.name;
temp.value = submitter.value;
+ nativeEventTarget.id &&
+ temp.setAttribute("form", nativeEventTarget.id);
submitter.parentNode.insertBefore(temp, submitter);
var formData = new FormData(nativeEventTarget);
temp.parentNode.removeChild(temp);
@@ -5601,7 +5604,7 @@ function updateWorkInProgressHook() {
}
var createFunctionComponentUpdateQueue;
createFunctionComponentUpdateQueue = function () {
- return { lastEffect: null, events: null, stores: null };
+ return { lastEffect: null, events: null, stores: null, memoCache: null };
};
function useThenable(thenable) {
var index = thenableIndexCounter;
@@ -5622,6 +5625,40 @@ function use(usable) {
}
throw Error(formatProdErrorMessage(438, String(usable)));
}
+function useMemoCache(size) {
+ var memoCache = null,
+ updateQueue = currentlyRenderingFiber$1.updateQueue;
+ null !== updateQueue && (memoCache = updateQueue.memoCache);
+ if (null == memoCache) {
+ var current = currentlyRenderingFiber$1.alternate;
+ null !== current &&
+ ((current = current.updateQueue),
+ null !== current &&
+ ((current = current.memoCache),
+ null != current &&
+ (memoCache = {
+ data: current.data.map(function (array) {
+ return array.slice();
+ }),
+ index: 0
+ })));
+ }
+ null == memoCache && (memoCache = { data: [], index: 0 });
+ null === updateQueue &&
+ ((updateQueue = createFunctionComponentUpdateQueue()),
+ (currentlyRenderingFiber$1.updateQueue = updateQueue));
+ updateQueue.memoCache = memoCache;
+ updateQueue = memoCache.data[memoCache.index];
+ if (void 0 === updateQueue)
+ for (
+ updateQueue = memoCache.data[memoCache.index] = Array(size), current = 0;
+ current < size;
+ current++
+ )
+ updateQueue[current] = REACT_MEMO_CACHE_SENTINEL;
+ memoCache.index++;
+ return updateQueue;
+}
function basicStateReducer(state, action) {
return "function" === typeof action ? action(state) : action;
}
@@ -6435,6 +6472,7 @@ var ContextOnlyDispatcher = {
useId: throwInvalidHookError
};
ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError;
+ContextOnlyDispatcher.useMemoCache = throwInvalidHookError;
ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError;
ContextOnlyDispatcher.useFormState = throwInvalidHookError;
ContextOnlyDispatcher.useActionState = throwInvalidHookError;
@@ -6598,6 +6636,7 @@ var HooksDispatcherOnMount = {
));
}
};
+HooksDispatcherOnMount.useMemoCache = useMemoCache;
HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus;
HooksDispatcherOnMount.useFormState = mountActionState;
HooksDispatcherOnMount.useActionState = mountActionState;
@@ -6660,6 +6699,7 @@ var HooksDispatcherOnUpdate = {
useId: updateId
};
HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh;
+HooksDispatcherOnUpdate.useMemoCache = useMemoCache;
HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus;
HooksDispatcherOnUpdate.useFormState = updateActionState;
HooksDispatcherOnUpdate.useActionState = updateActionState;
@@ -6708,6 +6748,7 @@ var HooksDispatcherOnRerender = {
useId: updateId
};
HooksDispatcherOnRerender.useCacheRefresh = updateRefresh;
+HooksDispatcherOnRerender.useMemoCache = useMemoCache;
HooksDispatcherOnRerender.useHostTransitionStatus = useHostTransitionStatus;
HooksDispatcherOnRerender.useFormState = rerenderActionState;
HooksDispatcherOnRerender.useActionState = rerenderActionState;
@@ -14501,7 +14542,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
var devToolsConfig$jscomp$inline_1641 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
- version: "19.0.0-beta-4508873393-20240430",
+ version: "19.0.0-beta-04b058868c-20240508",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2019 = {
@@ -14531,7 +14572,7 @@ var internals$jscomp$inline_2019 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
- reconcilerVersion: "19.0.0-beta-4508873393-20240430"
+ reconcilerVersion: "19.0.0-beta-04b058868c-20240508"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2020 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14637,4 +14678,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
listenToAllSupportedEvents(container);
return new ReactDOMHydrationRoot(initialChildren);
};
-exports.version = "19.0.0-beta-4508873393-20240430";
+exports.version = "19.0.0-beta-04b058868c-20240508";
diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js
index f301355e7f35bf..25e992fb831c0d 100644
--- a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js
+++ b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.development.js
@@ -12,10 +12,7 @@
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 ===
@@ -23,7 +20,7 @@ if (
) {
__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) {
@@ -8830,6 +8828,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);
@@ -17434,7 +17437,8 @@ var createFunctionComponentUpdateQueue;
return {
lastEffect: null,
events: null,
- stores: null
+ stores: null,
+ memoCache: null
};
};
}
@@ -17480,6 +17484,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;
@@ -19278,6 +19369,10 @@ var ContextOnlyDispatcher = {
ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError;
}
+{
+ ContextOnlyDispatcher.useMemoCache = throwInvalidHookError;
+}
+
{
ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError;
ContextOnlyDispatcher.useFormState = throwInvalidHookError;
@@ -19422,6 +19517,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ HooksDispatcherOnMountInDEV.useMemoCache = useMemoCache;
+ }
+
{
HooksDispatcherOnMountInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -19557,6 +19656,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ HooksDispatcherOnMountWithHookTypesInDEV.useMemoCache = useMemoCache;
+ }
+
{
HooksDispatcherOnMountWithHookTypesInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -19693,6 +19796,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ HooksDispatcherOnUpdateInDEV.useMemoCache = useMemoCache;
+ }
+
{
HooksDispatcherOnUpdateInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -19829,6 +19936,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ HooksDispatcherOnRerenderInDEV.useMemoCache = useMemoCache;
+ }
+
{
HooksDispatcherOnRerenderInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -19984,6 +20095,13 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ InvalidNestedHooksDispatcherOnMountInDEV.useMemoCache = function (size) {
+ warnInvalidHookAccess();
+ return useMemoCache(size);
+ };
+ }
+
{
InvalidNestedHooksDispatcherOnMountInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -20141,6 +20259,13 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ InvalidNestedHooksDispatcherOnUpdateInDEV.useMemoCache = function (size) {
+ warnInvalidHookAccess();
+ return useMemoCache(size);
+ };
+ }
+
{
InvalidNestedHooksDispatcherOnUpdateInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -20298,6 +20423,13 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
};
}
+ {
+ InvalidNestedHooksDispatcherOnRerenderInDEV.useMemoCache = function (size) {
+ warnInvalidHookAccess();
+ return useMemoCache(size);
+ };
+ }
+
{
InvalidNestedHooksDispatcherOnRerenderInDEV.useHostTransitionStatus = useHostTransitionStatus;
@@ -35876,7 +36008,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
return root;
}
-var ReactVersion = '19.0.0-beta-4508873393-20240430';
+var ReactVersion = '19.0.0-beta-04b058868c-20240508';
function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
implementation) {
@@ -37782,7 +37914,6 @@ exports.unstable_batchedUpdates = batchedUpdates;
exports.useFormState = useFormState;
exports.useFormStatus = useFormStatus;
exports.version = ReactVersion;
- /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
@@ -37790,6 +37921,6 @@ if (
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
}
-
+
})();
}
diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js
index 25f218e03d053f..b17dd56a08db63 100644
--- a/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js
+++ b/packages/next/src/compiled/react-dom/cjs/react-dom-profiling.profiling.js
@@ -59,7 +59,8 @@ Symbol.for("react.debug_trace_mode");
var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
Symbol.for("react.legacy_hidden");
Symbol.for("react.tracing_marker");
-var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel"),
+ MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
function getIteratorFn(maybeIterable) {
if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
maybeIterable =
@@ -2411,6 +2412,8 @@ function extractEvents$1(
var temp = submitter.ownerDocument.createElement("input");
temp.name = submitter.name;
temp.value = submitter.value;
+ nativeEventTarget.id &&
+ temp.setAttribute("form", nativeEventTarget.id);
submitter.parentNode.insertBefore(temp, submitter);
var formData = new FormData(nativeEventTarget);
temp.parentNode.removeChild(temp);
@@ -5723,7 +5726,7 @@ function updateWorkInProgressHook() {
}
var createFunctionComponentUpdateQueue;
createFunctionComponentUpdateQueue = function () {
- return { lastEffect: null, events: null, stores: null };
+ return { lastEffect: null, events: null, stores: null, memoCache: null };
};
function useThenable(thenable) {
var index = thenableIndexCounter;
@@ -5744,6 +5747,40 @@ function use(usable) {
}
throw Error(formatProdErrorMessage(438, String(usable)));
}
+function useMemoCache(size) {
+ var memoCache = null,
+ updateQueue = currentlyRenderingFiber$1.updateQueue;
+ null !== updateQueue && (memoCache = updateQueue.memoCache);
+ if (null == memoCache) {
+ var current = currentlyRenderingFiber$1.alternate;
+ null !== current &&
+ ((current = current.updateQueue),
+ null !== current &&
+ ((current = current.memoCache),
+ null != current &&
+ (memoCache = {
+ data: current.data.map(function (array) {
+ return array.slice();
+ }),
+ index: 0
+ })));
+ }
+ null == memoCache && (memoCache = { data: [], index: 0 });
+ null === updateQueue &&
+ ((updateQueue = createFunctionComponentUpdateQueue()),
+ (currentlyRenderingFiber$1.updateQueue = updateQueue));
+ updateQueue.memoCache = memoCache;
+ updateQueue = memoCache.data[memoCache.index];
+ if (void 0 === updateQueue)
+ for (
+ updateQueue = memoCache.data[memoCache.index] = Array(size), current = 0;
+ current < size;
+ current++
+ )
+ updateQueue[current] = REACT_MEMO_CACHE_SENTINEL;
+ memoCache.index++;
+ return updateQueue;
+}
function basicStateReducer(state, action) {
return "function" === typeof action ? action(state) : action;
}
@@ -6560,6 +6597,7 @@ var ContextOnlyDispatcher = {
useId: throwInvalidHookError
};
ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError;
+ContextOnlyDispatcher.useMemoCache = throwInvalidHookError;
ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError;
ContextOnlyDispatcher.useFormState = throwInvalidHookError;
ContextOnlyDispatcher.useActionState = throwInvalidHookError;
@@ -6723,6 +6761,7 @@ var HooksDispatcherOnMount = {
));
}
};
+HooksDispatcherOnMount.useMemoCache = useMemoCache;
HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus;
HooksDispatcherOnMount.useFormState = mountActionState;
HooksDispatcherOnMount.useActionState = mountActionState;
@@ -6785,6 +6824,7 @@ var HooksDispatcherOnUpdate = {
useId: updateId
};
HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh;
+HooksDispatcherOnUpdate.useMemoCache = useMemoCache;
HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus;
HooksDispatcherOnUpdate.useFormState = updateActionState;
HooksDispatcherOnUpdate.useActionState = updateActionState;
@@ -6833,6 +6873,7 @@ var HooksDispatcherOnRerender = {
useId: updateId
};
HooksDispatcherOnRerender.useCacheRefresh = updateRefresh;
+HooksDispatcherOnRerender.useMemoCache = useMemoCache;
HooksDispatcherOnRerender.useHostTransitionStatus = useHostTransitionStatus;
HooksDispatcherOnRerender.useFormState = rerenderActionState;
HooksDispatcherOnRerender.useActionState = rerenderActionState;
@@ -15212,7 +15253,7 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
var devToolsConfig$jscomp$inline_1728 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
- version: "19.0.0-beta-4508873393-20240430",
+ version: "19.0.0-beta-04b058868c-20240508",
rendererPackageName: "react-dom"
};
(function (internals) {
@@ -15255,7 +15296,7 @@ var devToolsConfig$jscomp$inline_1728 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
- reconcilerVersion: "19.0.0-beta-4508873393-20240430"
+ reconcilerVersion: "19.0.0-beta-04b058868c-20240508"
});
function noop() {}
function getCrossOriginStringAs(as, input) {
@@ -15509,7 +15550,7 @@ exports.useFormState = function (action, initialState, permalink) {
exports.useFormStatus = function () {
return ReactSharedInternals.H.useHostTransitionStatus();
};
-exports.version = "19.0.0-beta-4508873393-20240430";
+exports.version = "19.0.0-beta-04b058868c-20240508";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js
index 0ba2cd626a8a4b..f9b865e5ab994e 100644
--- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js
+++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js
@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
var React = require("next/dist/compiled/react");
var ReactDOM = require('react-dom');
-var ReactVersion = '19.0.0-beta-4508873393-20240430';
+var ReactVersion = '19.0.0-beta-04b058868c-20240508';
var ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
@@ -99,6 +99,7 @@ var REACT_SCOPE_TYPE = Symbol.for('react.scope');
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_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel');
var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator';
function getIteratorFn(maybeIterable) {
@@ -2527,11 +2528,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('");
}
+function validateAdditionalFormField(value) {
+ if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+}
function getCustomFormFields(resumableState, formAction) {
if ("function" === typeof formAction.$$FORM_ACTION) {
var id = resumableState.nextFormID++;
resumableState = resumableState.idPrefix + id;
try {
- return formAction.$$FORM_ACTION(resumableState);
+ var customFields = formAction.$$FORM_ACTION(resumableState);
+ if (customFields) {
+ var formData = customFields.data;
+ null != formData && formData.forEach(validateAdditionalFormField);
+ }
+ return customFields;
} catch (x) {
if ("object" === typeof x && null !== x && "function" === typeof x.then)
throw x;
@@ -2515,16 +2524,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
"\x3c/script>"
);
bootstrapScriptContent = idPrefix + "P:";
- var JSCompiler_object_inline_segmentPrefix_1483 = idPrefix + "S:";
+ var JSCompiler_object_inline_segmentPrefix_1485 = idPrefix + "S:";
idPrefix += "B:";
- var JSCompiler_object_inline_preconnects_1497 = new Set(),
- JSCompiler_object_inline_fontPreloads_1498 = new Set(),
- JSCompiler_object_inline_highImagePreloads_1499 = new Set(),
- JSCompiler_object_inline_styles_1500 = new Map(),
- JSCompiler_object_inline_bootstrapScripts_1501 = new Set(),
- JSCompiler_object_inline_scripts_1502 = new Set(),
- JSCompiler_object_inline_bulkPreloads_1503 = new Set(),
- JSCompiler_object_inline_preloads_1504 = {
+ var JSCompiler_object_inline_preconnects_1499 = new Set(),
+ JSCompiler_object_inline_fontPreloads_1500 = new Set(),
+ JSCompiler_object_inline_highImagePreloads_1501 = new Set(),
+ JSCompiler_object_inline_styles_1502 = new Map(),
+ JSCompiler_object_inline_bootstrapScripts_1503 = new Set(),
+ JSCompiler_object_inline_scripts_1504 = new Set(),
+ JSCompiler_object_inline_bulkPreloads_1505 = new Set(),
+ JSCompiler_object_inline_preloads_1506 = {
images: new Map(),
stylesheets: new Map(),
scripts: new Map(),
@@ -2561,7 +2570,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
scriptConfig.moduleScriptResources[href] = null;
scriptConfig = [];
pushLinkImpl(scriptConfig, props);
- JSCompiler_object_inline_bootstrapScripts_1501.add(scriptConfig);
+ JSCompiler_object_inline_bootstrapScripts_1503.add(scriptConfig);
bootstrapChunks.push('