From 8e12d481713e64650f762dbdbc02d3efad9fca37 Mon Sep 17 00:00:00 2001 From: rickhanlonii Date: Tue, 12 Mar 2024 19:54:22 +0000 Subject: [PATCH] Add pending state to useFormState (#28514) ## Overview Adds a `pending` state to useFormState, which will be replaced by `useActionState` in the next diff. We will keep `useFormState` around for backwards compatibility, but functionally it will work the same as `useActionState`, which has an `isPending` state returned. DiffTrain build for [17eaacaac167addf0c4358b4983f054073a0626d](https://github.com/facebook/react/commit/17eaacaac167addf0c4358b4983f054073a0626d) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-prod.classic.js | 2 +- compiled/facebook-www/React-prod.modern.js | 2 +- .../facebook-www/React-profiling.classic.js | 2 +- .../facebook-www/React-profiling.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 83 ++++++++++++++----- compiled/facebook-www/ReactART-dev.modern.js | 83 ++++++++++++++----- .../facebook-www/ReactART-prod.classic.js | 77 +++++++++++------ compiled/facebook-www/ReactART-prod.modern.js | 77 +++++++++++------ compiled/facebook-www/ReactDOM-dev.classic.js | 83 ++++++++++++++----- compiled/facebook-www/ReactDOM-dev.modern.js | 83 ++++++++++++++----- .../facebook-www/ReactDOM-prod.classic.js | 79 ++++++++++++------ compiled/facebook-www/ReactDOM-prod.modern.js | 79 ++++++++++++------ .../ReactDOM-profiling.classic.js | 79 ++++++++++++------ .../facebook-www/ReactDOM-profiling.modern.js | 79 ++++++++++++------ .../ReactDOMServer-dev.classic.js | 6 +- .../facebook-www/ReactDOMServer-dev.modern.js | 6 +- .../ReactDOMServer-prod.classic.js | 7 +- .../ReactDOMServer-prod.modern.js | 7 +- .../ReactDOMServerStreaming-dev.modern.js | 4 +- .../ReactDOMServerStreaming-prod.modern.js | 5 +- .../ReactDOMTesting-dev.classic.js | 83 ++++++++++++++----- .../ReactDOMTesting-dev.modern.js | 83 ++++++++++++++----- .../ReactDOMTesting-prod.classic.js | 79 ++++++++++++------ .../ReactDOMTesting-prod.modern.js | 79 ++++++++++++------ .../ReactTestRenderer-dev.classic.js | 83 ++++++++++++++----- .../ReactTestRenderer-dev.modern.js | 83 ++++++++++++++----- 27 files changed, 966 insertions(+), 371 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index 6083a175fdf19..394e5bd22dd40 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -3e6bc7d2d7098d9c8a30ba6e7a877df70f4d8d34 +17eaacaac167addf0c4358b4983f054073a0626d diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index 4defdb9990b87..cd3a0a84bf5e6 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -633,4 +633,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-43ac25ba"; +exports.version = "18.3.0-www-classic-7c2abefb"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index d201c145c98fc..6e1c9ef588097 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -625,4 +625,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-a7ff7332"; +exports.version = "18.3.0-www-modern-0337b6c3"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 27121f651e609..fa7f2e7e20972 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -637,7 +637,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-ba07b7d4"; +exports.version = "18.3.0-www-classic-9048e373"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 3031dde67cc80..9923e4d14cdae 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -629,7 +629,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-dc34ad0a"; +exports.version = "18.3.0-www-modern-c75eccb5"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index 70a2b518458f9..c28a0e77056e7 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-classic-3c471167"; + var ReactVersion = "18.3.0-www-classic-1172eaef"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -9873,7 +9873,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -9888,7 +9894,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -9900,7 +9906,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -9912,7 +9923,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -9929,10 +9943,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -9940,7 +9962,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -9952,7 +9974,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$2.transition = prevTransition; @@ -9974,7 +9996,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -9990,7 +10016,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -10020,7 +10051,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -10038,6 +10078,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -10045,7 +10086,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -10066,7 +10107,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -10090,7 +10134,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -10118,8 +10162,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -10758,8 +10803,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index ae7b627b030e2..bbf84d4016070 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-modern-aef3e69e"; + var ReactVersion = "18.3.0-www-modern-0c307366"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -9638,7 +9638,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -9653,7 +9659,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -9665,7 +9671,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -9677,7 +9688,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -9694,10 +9708,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -9705,7 +9727,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -9717,7 +9739,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$2.transition = prevTransition; @@ -9739,7 +9761,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -9755,7 +9781,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -9785,7 +9816,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -9803,6 +9843,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -9810,7 +9851,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -9831,7 +9872,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -9855,7 +9899,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -9883,8 +9927,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -10523,8 +10568,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 053ed52599dfa..9c6451ec5adde 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -3088,22 +3088,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$2.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$2.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -3113,24 +3120,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$2.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -3138,28 +3153,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -3167,7 +3188,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -3684,6 +3705,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { stateQueue ); stateQueue.dispatch = stateHook; + stateQueue = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + stateQueue.queue + ); stateQueue = mountWorkInProgressHook(); var actionQueue = { state: initialStateProp, @@ -3696,11 +3724,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, stateHook ); actionQueue.dispatch = stateHook; stateQueue.memoizedState = action; - return [initialStateProp, stateHook]; + return [initialStateProp, stateHook, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -3825,7 +3854,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -10597,7 +10626,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-classic-9b508310", + version: "18.3.0-www-classic-950e7acd", rendererPackageName: "react-art" }; var internals$jscomp$inline_1320 = { @@ -10628,7 +10657,7 @@ var internals$jscomp$inline_1320 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-9b508310" + reconcilerVersion: "18.3.0-www-classic-950e7acd" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1321 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 71abfe1022d2c..c624dd3a0e715 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -2884,22 +2884,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$2.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$2.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -2909,24 +2916,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$2.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -2934,28 +2949,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -2963,7 +2984,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -3480,6 +3501,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { stateQueue ); stateQueue.dispatch = stateHook; + stateQueue = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + stateQueue.queue + ); stateQueue = mountWorkInProgressHook(); var actionQueue = { state: initialStateProp, @@ -3492,11 +3520,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, stateHook ); actionQueue.dispatch = stateHook; stateQueue.memoizedState = action; - return [initialStateProp, stateHook]; + return [initialStateProp, stateHook, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -3621,7 +3650,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -10252,7 +10281,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-c405fc15", + version: "18.3.0-www-modern-7b6c6444", rendererPackageName: "react-art" }; var internals$jscomp$inline_1300 = { @@ -10283,7 +10312,7 @@ var internals$jscomp$inline_1300 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-c405fc15" + reconcilerVersion: "18.3.0-www-modern-7b6c6444" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1301 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index 0e24bfe93d302..bf7eb6133a3be 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -14674,7 +14674,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -14689,7 +14695,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -14701,7 +14707,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -14713,7 +14724,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$3.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -14730,10 +14744,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -14741,7 +14763,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -14753,7 +14775,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; @@ -14775,7 +14797,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -14791,7 +14817,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -14836,7 +14867,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -14854,6 +14894,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -14861,7 +14902,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -14882,7 +14923,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -14906,7 +14950,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -14934,8 +14978,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -15634,8 +15679,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; @@ -35719,7 +35764,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-610259aa"; + var ReactVersion = "18.3.0-www-classic-bdc658a4"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 9286a1e15314b..576c31cfbc494 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -14636,7 +14636,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -14651,7 +14657,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -14663,7 +14669,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -14675,7 +14686,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$3.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -14692,10 +14706,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -14703,7 +14725,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -14715,7 +14737,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; @@ -14737,7 +14759,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -14753,7 +14779,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -14798,7 +14829,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -14816,6 +14856,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -14823,7 +14864,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -14844,7 +14885,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -14868,7 +14912,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -14896,8 +14940,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -15596,8 +15641,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; @@ -35566,7 +35611,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-ecbb3330"; + var ReactVersion = "18.3.0-www-modern-36442b85"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 84dd0d7eee902..51b48e996037f 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -3852,22 +3852,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$3.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$3.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -3877,24 +3884,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -3902,28 +3917,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -3931,7 +3952,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -4556,6 +4577,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { JSCompiler_inline_result ); JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + JSCompiler_inline_result.queue + ); JSCompiler_inline_result = mountWorkInProgressHook(); inRootOrSingleton = { state: initialStateProp, @@ -4568,11 +4596,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, inRootOrSingleton, + setPendingState, ssrFormState ); inRootOrSingleton.dispatch = ssrFormState; JSCompiler_inline_result.memoizedState = action; - return [initialStateProp, ssrFormState]; + return [initialStateProp, ssrFormState, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -4697,7 +4726,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -17199,7 +17228,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1817 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-d67c302d", + version: "18.3.0-www-classic-36e5e9c2", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2176 = { @@ -17229,7 +17258,7 @@ var internals$jscomp$inline_2176 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-d67c302d" + reconcilerVersion: "18.3.0-www-classic-36e5e9c2" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2177 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17560,4 +17589,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-d67c302d"; +exports.version = "18.3.0-www-classic-36e5e9c2"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 6f147cedc1f5e..4f97eec6463da 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -3746,22 +3746,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$3.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$3.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -3771,24 +3778,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -3796,28 +3811,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -3825,7 +3846,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -4450,6 +4471,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { JSCompiler_inline_result ); JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + JSCompiler_inline_result.queue + ); JSCompiler_inline_result = mountWorkInProgressHook(); inRootOrSingleton = { state: initialStateProp, @@ -4462,11 +4490,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, inRootOrSingleton, + setPendingState, ssrFormState ); inRootOrSingleton.dispatch = ssrFormState; JSCompiler_inline_result.memoizedState = action; - return [initialStateProp, ssrFormState]; + return [initialStateProp, ssrFormState, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -4591,7 +4620,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -16715,7 +16744,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1776 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-acfb67f6", + version: "18.3.0-www-modern-67f26aa2", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2140 = { @@ -16746,7 +16775,7 @@ var internals$jscomp$inline_2140 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-acfb67f6" + reconcilerVersion: "18.3.0-www-modern-67f26aa2" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2141 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17005,4 +17034,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-acfb67f6"; +exports.version = "18.3.0-www-modern-67f26aa2"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index d3d1f1d9eadbc..5269d3292151e 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -3990,22 +3990,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$3.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$3.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -4015,24 +4022,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -4040,28 +4055,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -4069,7 +4090,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -4697,6 +4718,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { JSCompiler_inline_result ); JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + JSCompiler_inline_result.queue + ); JSCompiler_inline_result = mountWorkInProgressHook(); inRootOrSingleton = { state: initialStateProp, @@ -4709,11 +4737,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, inRootOrSingleton, + setPendingState, ssrFormState ); inRootOrSingleton.dispatch = ssrFormState; JSCompiler_inline_result.memoizedState = action; - return [initialStateProp, ssrFormState]; + return [initialStateProp, ssrFormState, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -4838,7 +4867,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -17946,7 +17975,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1902 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-74717070", + version: "18.3.0-www-classic-b1962418", rendererPackageName: "react-dom" }; (function (internals) { @@ -17990,7 +18019,7 @@ var devToolsConfig$jscomp$inline_1902 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-74717070" + reconcilerVersion: "18.3.0-www-classic-b1962418" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -18308,7 +18337,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-74717070"; +exports.version = "18.3.0-www-classic-b1962418"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index c07f6b6cb5446..c53025dd32f83 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -3884,22 +3884,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$3.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$3.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -3909,24 +3916,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -3934,28 +3949,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -3963,7 +3984,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -4591,6 +4612,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { JSCompiler_inline_result ); JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + JSCompiler_inline_result.queue + ); JSCompiler_inline_result = mountWorkInProgressHook(); inRootOrSingleton = { state: initialStateProp, @@ -4603,11 +4631,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, inRootOrSingleton, + setPendingState, ssrFormState ); inRootOrSingleton.dispatch = ssrFormState; JSCompiler_inline_result.memoizedState = action; - return [initialStateProp, ssrFormState]; + return [initialStateProp, ssrFormState, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -4732,7 +4761,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -17456,7 +17485,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1861 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-aef3e69e", + version: "18.3.0-www-modern-0c307366", rendererPackageName: "react-dom" }; (function (internals) { @@ -17501,7 +17530,7 @@ var devToolsConfig$jscomp$inline_1861 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-aef3e69e" + reconcilerVersion: "18.3.0-www-modern-0c307366" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17747,7 +17776,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-aef3e69e"; +exports.version = "18.3.0-www-modern-0c307366"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index 59c77fb93d30f..c9b8cd445491c 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-classic-1b1f613f"; + var ReactVersion = "18.3.0-www-classic-665182c7"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -10549,7 +10549,7 @@ if (__DEV__) { }; } - return [state, dispatch]; + return [state, dispatch, false]; } else { // This is not a server action, so the implementation is much simpler. // Bind the state to the first argument of the action. @@ -10559,7 +10559,7 @@ if (__DEV__) { _boundAction(payload); }; - return [initialState, _dispatch2]; + return [initialState, _dispatch2, false]; } } diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index 2acd396b8b108..9b3d4d22ebf7a 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-modern-418a9c9b"; + var ReactVersion = "18.3.0-www-modern-130d9f5a"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -10470,7 +10470,7 @@ if (__DEV__) { }; } - return [state, dispatch]; + return [state, dispatch, false]; } else { // This is not a server action, so the implementation is much simpler. // Bind the state to the first argument of the action. @@ -10480,7 +10480,7 @@ if (__DEV__) { _boundAction(payload); }; - return [initialState, _dispatch2]; + return [initialState, _dispatch2, false]; } } diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index 4b3c2f54b120b..51f77369120c8 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -3269,14 +3269,15 @@ var HooksDispatcher = { formData.append("$ACTION_KEY", nextPostbackStateKey)); return prefix; }); - return [initialState, action]; + return [initialState, action, !1]; } var boundAction$23 = action.bind(null, initialState); return [ initialState, function (payload) { boundAction$23(payload); - } + }, + !1 ]; } }, @@ -5704,4 +5705,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-classic-70ff46d1"; +exports.version = "18.3.0-www-classic-3f97a873"; diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js index b66cb110df820..6a6e937397482 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js @@ -3261,14 +3261,15 @@ var HooksDispatcher = { formData.append("$ACTION_KEY", nextPostbackStateKey)); return prefix; }); - return [initialState, action]; + return [initialState, action, !1]; } var boundAction$23 = action.bind(null, initialState); return [ initialState, function (payload) { boundAction$23(payload); - } + }, + !1 ]; } }, @@ -5645,4 +5646,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-modern-36df396c"; +exports.version = "18.3.0-www-modern-7660299b"; diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js index 7a5111eea91a8..9d25e66679e66 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js @@ -10354,7 +10354,7 @@ if (__DEV__) { }; } - return [state, dispatch]; + return [state, dispatch, false]; } else { // This is not a server action, so the implementation is much simpler. // Bind the state to the first argument of the action. @@ -10364,7 +10364,7 @@ if (__DEV__) { _boundAction(payload); }; - return [initialState, _dispatch2]; + return [initialState, _dispatch2, false]; } } diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js index 076ba6b093db9..ed156d7aa6f58 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js @@ -3150,14 +3150,15 @@ var HooksDispatcher = { formData.append("$ACTION_KEY", nextPostbackStateKey)); return prefix; }); - return [initialState, action]; + return [initialState, action, !1]; } var boundAction$23 = action.bind(null, initialState); return [ initialState, function (payload) { boundAction$23(payload); - } + }, + !1 ]; } }, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 3bdec8d3b46f3..96945dc7cc112 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -14811,7 +14811,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -14826,7 +14832,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -14838,7 +14844,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -14850,7 +14861,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$3.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -14867,10 +14881,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -14878,7 +14900,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -14890,7 +14912,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; @@ -14912,7 +14934,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -14928,7 +14954,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -14973,7 +15004,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -14991,6 +15031,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -14998,7 +15039,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -15019,7 +15060,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -15043,7 +15087,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -15071,8 +15115,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -15771,8 +15816,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; @@ -36343,7 +36388,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-43ac25ba"; + var ReactVersion = "18.3.0-www-classic-7c2abefb"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index f6270ed9bf6c3..796e5adbaacd8 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -14773,7 +14773,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -14788,7 +14794,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -14800,7 +14806,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -14812,7 +14823,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$3.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -14829,10 +14843,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -14840,7 +14862,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -14852,7 +14874,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; @@ -14874,7 +14896,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -14890,7 +14916,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -14935,7 +14966,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -14953,6 +14993,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -14960,7 +15001,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -14981,7 +15022,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -15005,7 +15049,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -15033,8 +15077,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -15733,8 +15778,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; @@ -36190,7 +36235,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-b8767e75"; + var ReactVersion = "18.3.0-www-modern-366ea630"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index aa6f584e34636..844c65292721a 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -3938,22 +3938,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$3.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$3.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -3963,24 +3970,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -3988,28 +4003,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -4017,7 +4038,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -4642,6 +4663,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { JSCompiler_inline_result ); JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + JSCompiler_inline_result.queue + ); JSCompiler_inline_result = mountWorkInProgressHook(); inRootOrSingleton = { state: initialStateProp, @@ -4654,11 +4682,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, inRootOrSingleton, + setPendingState, ssrFormState ); inRootOrSingleton.dispatch = ssrFormState; JSCompiler_inline_result.memoizedState = action; - return [initialStateProp, ssrFormState]; + return [initialStateProp, ssrFormState, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -4783,7 +4812,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -17528,7 +17557,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1822 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-ba07b7d4", + version: "18.3.0-www-classic-9048e373", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2188 = { @@ -17558,7 +17587,7 @@ var internals$jscomp$inline_2188 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-ba07b7d4" + reconcilerVersion: "18.3.0-www-classic-9048e373" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2189 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -18040,4 +18069,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-ba07b7d4"; +exports.version = "18.3.0-www-classic-9048e373"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index d3e68a6bb554f..4dc9d446f1e3b 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -3893,22 +3893,29 @@ function updateOptimisticImpl(hook, current, passthrough, reducer) { "function" === typeof reducer ? reducer : basicStateReducer ); } -function dispatchFormState(fiber, actionQueue, setState, payload) { +function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload +) { if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); fiber = actionQueue.pending; null === fiber ? ((fiber = { payload: payload, next: null }), (fiber.next = actionQueue.pending = fiber), - runFormStateAction(actionQueue, setState, payload)) + runFormStateAction(actionQueue, setPendingState, setState, payload)) : (actionQueue.pending = fiber.next = { payload: payload, next: fiber.next }); } -function runFormStateAction(actionQueue, setState, payload) { +function runFormStateAction(actionQueue, setPendingState, setState, payload) { var action = actionQueue.action, prevState = actionQueue.state, prevTransition = ReactCurrentBatchConfig$3.transition, currentTransition = { _callbacks: new Set() }; ReactCurrentBatchConfig$3.transition = currentTransition; + setPendingState(!0); try { var returnValue = action(prevState, payload); null !== returnValue && @@ -3918,24 +3925,32 @@ function runFormStateAction(actionQueue, setState, payload) { returnValue.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ), setState(returnValue)) : (setState(returnValue), (actionQueue.state = returnValue), - finishRunningFormStateAction(actionQueue, setState)); + finishRunningFormStateAction(actionQueue, setPendingState, setState)); } catch (error) { setState({ then: function () {}, status: "rejected", reason: error }), - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$3.transition = prevTransition; } } -function finishRunningFormStateAction(actionQueue, setState) { +function finishRunningFormStateAction(actionQueue, setPendingState, setState) { var last = actionQueue.pending; if (null !== last) { var first = last.next; @@ -3943,28 +3958,34 @@ function finishRunningFormStateAction(actionQueue, setState) { ? (actionQueue.pending = null) : ((first = first.next), (last.next = first), - runFormStateAction(actionQueue, setState, first.payload)); + runFormStateAction( + actionQueue, + setPendingState, + setState, + first.payload + )); } } function formStateReducer(oldState, newState) { return newState; } function updateFormStateImpl(stateHook, currentStateHook, action) { - stateHook = updateReducerImpl( + currentStateHook = updateReducerImpl( stateHook, currentStateHook, formStateReducer )[0]; - stateHook = - "object" === typeof stateHook && - null !== stateHook && - "function" === typeof stateHook.then - ? useThenable(stateHook) - : stateHook; - currentStateHook = updateWorkInProgressHook(); - var actionQueue = currentStateHook.queue, + stateHook = updateReducer(basicStateReducer)[0]; + currentStateHook = + "object" === typeof currentStateHook && + null !== currentStateHook && + "function" === typeof currentStateHook.then + ? useThenable(currentStateHook) + : currentStateHook; + var actionQueueHook = updateWorkInProgressHook(), + actionQueue = actionQueueHook.queue, dispatch = actionQueue.dispatch; - action !== currentStateHook.memoizedState && + action !== actionQueueHook.memoizedState && ((currentlyRenderingFiber$1.flags |= 2048), pushEffect( 9, @@ -3972,7 +3993,7 @@ function updateFormStateImpl(stateHook, currentStateHook, action) { { destroy: void 0 }, null )); - return [stateHook, dispatch]; + return [currentStateHook, dispatch, stateHook]; } function formStateActionEffect(actionQueue, action) { actionQueue.action = action; @@ -4597,6 +4618,13 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { JSCompiler_inline_result ); JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountStateImpl(!1); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + !1, + JSCompiler_inline_result.queue + ); JSCompiler_inline_result = mountWorkInProgressHook(); inRootOrSingleton = { state: initialStateProp, @@ -4609,11 +4637,12 @@ HooksDispatcherOnMount.useFormState = function (action, initialStateProp) { null, currentlyRenderingFiber$1, inRootOrSingleton, + setPendingState, ssrFormState ); inRootOrSingleton.dispatch = ssrFormState; JSCompiler_inline_result.memoizedState = action; - return [initialStateProp, ssrFormState]; + return [initialStateProp, ssrFormState, !1]; }; HooksDispatcherOnMount.useOptimistic = function (passthrough) { var hook = mountWorkInProgressHook(); @@ -4738,7 +4767,7 @@ HooksDispatcherOnRerender.useFormState = function (action) { currentStateHook = updateWorkInProgressHook(); var dispatch = currentStateHook.queue.dispatch; currentStateHook.memoizedState = action; - return [stateHook, dispatch]; + return [stateHook, dispatch, !1]; }; HooksDispatcherOnRerender.useOptimistic = function (passthrough, reducer) { var hook = updateWorkInProgressHook(); @@ -17105,7 +17134,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1781 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-e526f035", + version: "18.3.0-www-modern-ebda6e88", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2151 = { @@ -17136,7 +17165,7 @@ var internals$jscomp$inline_2151 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-e526f035" + reconcilerVersion: "18.3.0-www-modern-ebda6e88" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2152 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17545,4 +17574,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-e526f035"; +exports.version = "18.3.0-www-modern-ebda6e88"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index d19797f17a558..5e8ea0d8e099c 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -8744,7 +8744,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -8759,7 +8765,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -8771,7 +8777,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -8783,7 +8794,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -8800,10 +8814,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -8811,7 +8833,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -8823,7 +8845,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$2.transition = prevTransition; @@ -8845,7 +8867,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -8861,7 +8887,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -8891,7 +8922,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -8909,6 +8949,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -8916,7 +8957,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -8937,7 +8978,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -8961,7 +9005,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -8989,8 +9033,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -9487,8 +9532,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; @@ -26010,7 +26055,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-399a3692"; + var ReactVersion = "18.3.0-www-classic-9d965804"; // Might add PROFILE later. diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 73bd20f733ab7..8823765e9cd1b 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -8744,7 +8744,13 @@ if (__DEV__) { } // useFormState actions run sequentially, because each action receives the // previous state as an argument. We store pending actions on a queue. - function dispatchFormState(fiber, actionQueue, setState, payload) { + function dispatchFormState( + fiber, + actionQueue, + setPendingState, + setState, + payload + ) { if (isRenderPhaseUpdate(fiber)) { throw new Error("Cannot update form state while rendering."); } @@ -8759,7 +8765,7 @@ if (__DEV__) { next: null // circular }; newLast.next = actionQueue.pending = newLast; - runFormStateAction(actionQueue, setState, payload); + runFormStateAction(actionQueue, setPendingState, setState, payload); } else { // There's already an action running. Add to the queue. var first = last.next; @@ -8771,7 +8777,12 @@ if (__DEV__) { } } - function runFormStateAction(actionQueue, setState, payload) { + function runFormStateAction( + actionQueue, + setPendingState, + setState, + payload + ) { var action = actionQueue.action; var prevState = actionQueue.state; // This is a fork of startTransition @@ -8783,7 +8794,10 @@ if (__DEV__) { { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); - } + } // Optimistically update the pending state, similar to useTransition. + // This will be reverted automatically when all actions are finished. + + setPendingState(true); try { var returnValue = action(prevState, payload); @@ -8800,10 +8814,18 @@ if (__DEV__) { thenable.then( function (nextState) { actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); }, function () { - return finishRunningFormStateAction(actionQueue, setState); + return finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ); } ); setState(thenable); @@ -8811,7 +8833,7 @@ if (__DEV__) { setState(returnValue); var nextState = returnValue; actionQueue.state = nextState; - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } } catch (error) { // This is a trick to get the `useFormState` hook to rethrow the error. @@ -8823,7 +8845,7 @@ if (__DEV__) { reason: error // $FlowFixMe: Not sure why this doesn't work }; setState(rejectedThenable); - finishRunningFormStateAction(actionQueue, setState); + finishRunningFormStateAction(actionQueue, setPendingState, setState); } finally { ReactCurrentBatchConfig$2.transition = prevTransition; @@ -8845,7 +8867,11 @@ if (__DEV__) { } } - function finishRunningFormStateAction(actionQueue, setState) { + function finishRunningFormStateAction( + actionQueue, + setPendingState, + setState + ) { // The action finished running. Pop it from the queue and run the next pending // action, if there are any. var last = actionQueue.pending; @@ -8861,7 +8887,12 @@ if (__DEV__) { var next = first.next; last.next = next; // Run the next action. - runFormStateAction(actionQueue, setState, next.payload); + runFormStateAction( + actionQueue, + setPendingState, + setState, + next.payload + ); } } } @@ -8891,7 +8922,16 @@ if (__DEV__) { currentlyRenderingFiber$1, stateQueue ); - stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action. + // Tracked optimistically, like a transition pending state. + + var pendingStateHook = mountStateImpl(false); + var setPendingState = dispatchOptimisticSetState.bind( + null, + currentlyRenderingFiber$1, + false, + pendingStateHook.queue + ); // Action queue hook. This is used to queue pending actions. The queue is // shared between all instances of the hook. Similar to a regular state queue, // but different because the actions are run sequentially, and they run in // an event instead of during render. @@ -8909,6 +8949,7 @@ if (__DEV__) { null, currentlyRenderingFiber$1, actionQueue, + setPendingState, setState ); actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this @@ -8916,7 +8957,7 @@ if (__DEV__) { // an effect. actionQueueHook.memoizedState = action; - return [initialState, dispatch]; + return [initialState, dispatch, false]; } function updateFormState(action, initialState, permalink) { @@ -8937,7 +8978,10 @@ if (__DEV__) { currentStateHook, formStateReducer ), - actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + actionResult = _updateReducerImpl[0]; + + var _updateState = updateState(), + isPending = _updateState[0]; // This will suspend until the action finishes. var state = typeof actionResult === "object" && @@ -8961,7 +9005,7 @@ if (__DEV__) { ); } - return [state, dispatch]; + return [state, dispatch, isPending]; } function formStateActionEffect(actionQueue, action) { @@ -8989,8 +9033,9 @@ if (__DEV__) { var actionQueue = actionQueueHook.queue; var dispatch = actionQueue.dispatch; // This may have changed during the rerender. - actionQueueHook.memoizedState = action; - return [state, dispatch]; + actionQueueHook.memoizedState = action; // For mount, pending is always false. + + return [state, dispatch, false]; } function pushEffect(tag, create, inst, deps) { @@ -9487,8 +9532,8 @@ if (__DEV__) { } function updateTransition() { - var _updateState = updateState(), - booleanOrThenable = _updateState[0]; + var _updateState2 = updateState(), + booleanOrThenable = _updateState2[0]; var hook = updateWorkInProgressHook(); var start = hook.memoizedState; @@ -26010,7 +26055,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-a31c98c7"; + var ReactVersion = "18.3.0-www-modern-ee6fb8b5"; // Might add PROFILE later.