diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 06d0c1b93a30..b67e3a655ea5 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -6208,8 +6208,8 @@ describe('ReactDOMFizzServer', () => { // Because of the render phase update above, this component is evaluated // multiple times (even during SSR), but it should only emit a single // marker per useActionState instance. - const [formState] = useActionState(action, 0); - const text = `${readText('Child')}:${formState}:${localState}`; + const [actionState] = useActionState(action, 0); + const text = `${readText('Child')}:${actionState}:${localState}`; return (
| null, + pending: ActionStateQueueNode
| null, }; -type FormStateActionQueueNode
= { +type ActionStateQueueNode
= { payload: P, // This is never null because it's part of a circular linked list. - next: FormStateActionQueueNode
, + next: ActionStateQueueNode
,
};
-function dispatchFormState(
+function dispatchActionState(
fiber: Fiber,
- actionQueue: FormStateActionQueue,
+ actionQueue: ActionStateQueue,
setPendingState: boolean => void,
setState: Dispatch>,
payload: P,
@@ -1925,13 +1925,13 @@ function dispatchFormState(
if (last === null) {
// There are no pending actions; this is the first one. We can run
// it immediately.
- const newLast: FormStateActionQueueNode
= { + const newLast: ActionStateQueueNode
= {
payload,
next: (null: any), // circular
};
newLast.next = actionQueue.pending = newLast;
- runFormStateAction(
+ runActionStateAction(
actionQueue,
(setPendingState: any),
(setState: any),
@@ -1940,7 +1940,7 @@ function dispatchFormState(
} else {
// There's already an action running. Add to the queue.
const first = last.next;
- const newLast: FormStateActionQueueNode
= { + const newLast: ActionStateQueueNode
= {
payload,
next: first,
};
@@ -1948,8 +1948,8 @@ function dispatchFormState(
}
}
-function runFormStateAction(
- actionQueue: FormStateActionQueue,
+function runActionStateAction(
+ actionQueue: ActionStateQueue,
setPendingState: boolean => void,
setState: Dispatch>,
payload: P,
@@ -1987,14 +1987,14 @@ function runFormStateAction(
thenable.then(
(nextState: Awaited) => {
actionQueue.state = nextState;
- finishRunningFormStateAction(
+ finishRunningActionStateAction(
actionQueue,
(setPendingState: any),
(setState: any),
);
},
() =>
- finishRunningFormStateAction(
+ finishRunningActionStateAction(
actionQueue,
(setPendingState: any),
(setState: any),
@@ -2007,14 +2007,14 @@ function runFormStateAction(
const nextState = ((returnValue: any): Awaited);
actionQueue.state = nextState;
- finishRunningFormStateAction(
+ finishRunningActionStateAction(
actionQueue,
(setPendingState: any),
(setState: any),
);
}
} catch (error) {
- // This is a trick to get the `useFormState` hook to rethrow the error.
+ // This is a trick to get the `useActionState` hook to rethrow the error.
// When it unwraps the thenable with the `use` algorithm, the error
// will be thrown.
const rejectedThenable: S = ({
@@ -2024,7 +2024,7 @@ function runFormStateAction(
// $FlowFixMe: Not sure why this doesn't work
}: RejectedThenable(
}
}
-function finishRunningFormStateAction(
- actionQueue: FormStateActionQueue,
+function finishRunningActionStateAction(
+ actionQueue: ActionStateQueue,
setPendingState: Dispatch>,
setState: Dispatch>,
) {
@@ -2067,7 +2067,7 @@ function finishRunningFormStateAction(
last.next = next;
// Run the next action.
- runFormStateAction(
+ runActionStateAction(
actionQueue,
(setPendingState: any),
(setState: any),
@@ -2077,11 +2077,11 @@ function finishRunningFormStateAction(
}
}
-function formStateReducer(oldState: S, newState: S): S {
+function actionStateReducer(oldState: S, newState: S): S {
return newState;
}
-function mountFormState(
+function mountActionState(
action: (Awaited, P) => S,
initialStateProp: Awaited,
permalink?: string,
@@ -2113,7 +2113,7 @@ function mountFormState(
pending: null,
lanes: NoLanes,
dispatch: (null: any),
- lastRenderedReducer: formStateReducer,
+ lastRenderedReducer: actionStateReducer,
lastRenderedState: initialState,
};
stateHook.queue = stateQueue;
@@ -2142,14 +2142,14 @@ function mountFormState(
// but different because the actions are run sequentially, and they run in
// an event instead of during render.
const actionQueueHook = mountWorkInProgressHook();
- const actionQueue: FormStateActionQueue = {
+ const actionQueue: ActionStateQueue = {
state: initialState,
dispatch: (null: any), // circular
action,
pending: null,
};
actionQueueHook.queue = actionQueue;
- const dispatch = (dispatchFormState: any).bind(
+ const dispatch = (dispatchActionState: any).bind(
null,
currentlyRenderingFiber,
actionQueue,
@@ -2166,14 +2166,14 @@ function mountFormState(
return [initialState, dispatch, false];
}
-function updateFormState(
+function updateActionState(
action: (Awaited, P) => S,
initialState: Awaited,
permalink?: string,
): [Awaited, (P) => void, boolean] {
const stateHook = updateWorkInProgressHook();
const currentStateHook = ((currentHook: any): Hook);
- return updateFormStateImpl(
+ return updateActionStateImpl(
stateHook,
currentStateHook,
action,
@@ -2182,7 +2182,7 @@ function updateFormState(
);
}
-function updateFormStateImpl(
+function updateActionStateImpl(
stateHook: Hook,
currentStateHook: Hook,
action: (Awaited, P) => S,
@@ -2192,7 +2192,7 @@ function updateFormStateImpl(
const [actionResult] = updateReducerImpl, S | Thenable>(
stateHook,
currentStateHook,
- formStateReducer,
+ actionStateReducer,
);
const [isPending] = updateState(false);
@@ -2216,7 +2216,7 @@ function updateFormStateImpl(
currentlyRenderingFiber.flags |= PassiveEffect;
pushEffect(
HookHasEffect | HookPassive,
- formStateActionEffect.bind(null, actionQueue, action),
+ actionStateActionEffect.bind(null, actionQueue, action),
createEffectInstance(),
null,
);
@@ -2225,19 +2225,19 @@ function updateFormStateImpl(
return [state, dispatch, isPending];
}
-function formStateActionEffect(
- actionQueue: FormStateActionQueue,
+function actionStateActionEffect(
+ actionQueue: ActionStateQueue,
action: (Awaited, P) => S,
): void {
actionQueue.action = action;
}
-function rerenderFormState(
+function rerenderActionState(
action: (Awaited, P) => S,
initialState: Awaited,
permalink?: string,
): [Awaited, (P) => void, boolean] {
- // Unlike useState, useFormState doesn't support render phase updates.
+ // Unlike useState, useActionState doesn't support render phase updates.
// Also unlike useState, we need to replay all pending updates again in case
// the passthrough value changed.
//
@@ -2249,7 +2249,7 @@ function rerenderFormState(
if (currentStateHook !== null) {
// This is an update. Process the update queue.
- return updateFormStateImpl(
+ return updateActionStateImpl(
stateHook,
currentStateHook,
action,
@@ -3548,8 +3548,8 @@ if (enableUseEffectEventHook) {
if (enableAsyncActions) {
(HooksDispatcherOnMount: Dispatcher).useHostTransitionStatus =
useHostTransitionStatus;
- (HooksDispatcherOnMount: Dispatcher).useFormState = mountFormState;
- (HooksDispatcherOnMount: Dispatcher).useActionState = mountFormState;
+ (HooksDispatcherOnMount: Dispatcher).useFormState = mountActionState;
+ (HooksDispatcherOnMount: Dispatcher).useActionState = mountActionState;
}
if (enableAsyncActions) {
(HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
@@ -3587,8 +3587,8 @@ if (enableUseEffectEventHook) {
if (enableAsyncActions) {
(HooksDispatcherOnUpdate: Dispatcher).useHostTransitionStatus =
useHostTransitionStatus;
- (HooksDispatcherOnUpdate: Dispatcher).useFormState = updateFormState;
- (HooksDispatcherOnUpdate: Dispatcher).useActionState = updateFormState;
+ (HooksDispatcherOnUpdate: Dispatcher).useFormState = updateActionState;
+ (HooksDispatcherOnUpdate: Dispatcher).useActionState = updateActionState;
}
if (enableAsyncActions) {
(HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
@@ -3626,8 +3626,8 @@ if (enableUseEffectEventHook) {
if (enableAsyncActions) {
(HooksDispatcherOnRerender: Dispatcher).useHostTransitionStatus =
useHostTransitionStatus;
- (HooksDispatcherOnRerender: Dispatcher).useFormState = rerenderFormState;
- (HooksDispatcherOnRerender: Dispatcher).useActionState = rerenderFormState;
+ (HooksDispatcherOnRerender: Dispatcher).useFormState = rerenderActionState;
+ (HooksDispatcherOnRerender: Dispatcher).useActionState = rerenderActionState;
}
if (enableAsyncActions) {
(HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
@@ -3820,7 +3820,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useFormState';
mountHookTypesDev();
- return mountFormState(action, initialState, permalink);
+ return mountActionState(action, initialState, permalink);
};
(HooksDispatcherOnMountInDEV: Dispatcher).useActionState =
function useActionState(
@@ -3830,7 +3830,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useActionState';
mountHookTypesDev();
- return mountFormState(action, initialState, permalink);
+ return mountActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
@@ -4000,7 +4000,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useFormState';
updateHookTypesDev();
- return mountFormState(action, initialState, permalink);
+ return mountActionState(action, initialState, permalink);
};
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useActionState =
function useActionState(
@@ -4010,7 +4010,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useActionState';
updateHookTypesDev();
- return mountFormState(action, initialState, permalink);
+ return mountActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
@@ -4182,7 +4182,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useFormState';
updateHookTypesDev();
- return updateFormState(action, initialState, permalink);
+ return updateActionState(action, initialState, permalink);
};
(HooksDispatcherOnUpdateInDEV: Dispatcher).useActionState =
function useActionState(
@@ -4192,7 +4192,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useActionState';
updateHookTypesDev();
- return updateFormState(action, initialState, permalink);
+ return updateActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
@@ -4364,7 +4364,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useFormState';
updateHookTypesDev();
- return rerenderFormState(action, initialState, permalink);
+ return rerenderActionState(action, initialState, permalink);
};
(HooksDispatcherOnRerenderInDEV: Dispatcher).useActionState =
function useActionState(
@@ -4374,7 +4374,7 @@ if (__DEV__) {
): [Awaited, (P) => void, boolean] {
currentHookNameInDev = 'useActionState';
updateHookTypesDev();
- return rerenderFormState(action, initialState, permalink);
+ return rerenderActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
@@ -4568,7 +4568,7 @@ if (__DEV__) {
currentHookNameInDev = 'useFormState';
warnInvalidHookAccess();
mountHookTypesDev();
- return mountFormState(action, initialState, permalink);
+ return mountActionState(action, initialState, permalink);
};
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useActionState =
function useActionState(
@@ -4579,7 +4579,7 @@ if (__DEV__) {
currentHookNameInDev = 'useActionState';
warnInvalidHookAccess();
mountHookTypesDev();
- return mountFormState(action, initialState, permalink);
+ return mountActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
@@ -4777,7 +4777,7 @@ if (__DEV__) {
currentHookNameInDev = 'useFormState';
warnInvalidHookAccess();
updateHookTypesDev();
- return updateFormState(action, initialState, permalink);
+ return updateActionState(action, initialState, permalink);
};
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useActionState =
function useActionState(
@@ -4788,7 +4788,7 @@ if (__DEV__) {
currentHookNameInDev = 'useActionState';
warnInvalidHookAccess();
updateHookTypesDev();
- return updateFormState(action, initialState, permalink);
+ return updateActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
@@ -4986,7 +4986,7 @@ if (__DEV__) {
currentHookNameInDev = 'useFormState';
warnInvalidHookAccess();
updateHookTypesDev();
- return rerenderFormState(action, initialState, permalink);
+ return rerenderActionState(action, initialState, permalink);
};
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useActionState =
function useActionState(
@@ -4997,7 +4997,7 @@ if (__DEV__) {
currentHookNameInDev = 'useActionState';
warnInvalidHookAccess();
updateHookTypesDev();
- return rerenderFormState(action, initialState, permalink);
+ return rerenderActionState(action, initialState, permalink);
};
}
if (enableAsyncActions) {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 90d87e13d7b3..1ff9da652806 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -650,7 +650,7 @@ export function tryToClaimNextHydratableFormMarkerInstance(
}
// Should have found a marker instance. Throw an error to trigger client
// rendering. We don't bother to check if we're in a concurrent root because
- // useFormState is a new API, so backwards compat is not an issue.
+ // useActionState is a new API, so backwards compat is not an issue.
throwOnHydrationMismatch(fiber);
return false;
}
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
index c958aacbea44..e90a36180681 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
@@ -892,7 +892,7 @@ describe('ReactFlightDOMForm', () => {
});
// @gate enableAsyncActions
- it('useFormState can return JSX state during MPA form submission', async () => {
+ it('useActionState can return JSX state during MPA form submission', async () => {
const serverAction = serverExports(
async function action(prevState, formData) {
return (
return [passthrough, unsupportedSetOptimisticState];
}
-function createPostbackFormStateKey(
+function createPostbackActionStateKey(
permalink: string | void,
componentKeyPath: KeyNode | null,
hookIndex: number,
@@ -610,17 +610,17 @@ function createPostbackFormStateKey(
}
}
-function useFormState(
+function useActionState(
action: (Awaited, P) => S,
initialState: Awaited,
permalink?: string,
): [Awaited, (P) => void, boolean] {
resolveCurrentlyRenderingComponent();
- // Count the number of useFormState hooks per component. We also use this to
- // track the position of this useFormState hook relative to the other ones in
+ // Count the number of useActionState hooks per component. We also use this to
+ // track the position of this useActionState hook relative to the other ones in
// this component, so we can generate a unique key for each one.
- const formStateHookIndex = formStateCounter++;
+ const actionStateHookIndex = actionStateCounter++;
const request: Request = (currentlyRenderingRequest: any);
// $FlowIgnore[prop-missing]
@@ -629,7 +629,7 @@ function useFormState(
// This is a server action. These have additional features to enable
// MPA-style form submissions with progressive enhancement.
- // TODO: If the same permalink is passed to multiple useFormStates, and
+ // TODO: If the same permalink is passed to multiple useActionStates, and
// they all have the same action signature, Fizz will pass the postback
// state to all of them. We should probably only pass it to the first one,
// and/or warn.
@@ -640,30 +640,33 @@ function useFormState(
// Determine the current form state. If we received state during an MPA form
// submission, then we will reuse that, if the action identity matches.
- // Otherwise we'll use the initial state argument. We will emit a comment
+ // Otherwise, we'll use the initial state argument. We will emit a comment
// marker into the stream that indicates whether the state was reused.
let state = initialState;
const componentKeyPath = (currentlyRenderingKeyPath: any);
- const postbackFormState = getFormState(request);
+ const postbackActionState = getFormState(request);
// $FlowIgnore[prop-missing]
const isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
- if (postbackFormState !== null && typeof isSignatureEqual === 'function') {
- const postbackKey = postbackFormState[1];
- const postbackReferenceId = postbackFormState[2];
- const postbackBoundArity = postbackFormState[3];
+ if (
+ postbackActionState !== null &&
+ typeof isSignatureEqual === 'function'
+ ) {
+ const postbackKey = postbackActionState[1];
+ const postbackReferenceId = postbackActionState[2];
+ const postbackBoundArity = postbackActionState[3];
if (
isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
) {
- nextPostbackStateKey = createPostbackFormStateKey(
+ nextPostbackStateKey = createPostbackActionStateKey(
permalink,
componentKeyPath,
- formStateHookIndex,
+ actionStateHookIndex,
);
if (postbackKey === nextPostbackStateKey) {
// This was a match
- formStateMatchingIndex = formStateHookIndex;
+ actionStateMatchingIndex = actionStateHookIndex;
// Reuse the state that was submitted by the form.
- state = postbackFormState[0];
+ state = postbackActionState[0];
}
}
}
@@ -695,10 +698,10 @@ function useFormState(
const formData = metadata.data;
if (formData) {
if (nextPostbackStateKey === null) {
- nextPostbackStateKey = createPostbackFormStateKey(
+ nextPostbackStateKey = createPostbackActionStateKey(
permalink,
componentKeyPath,
- formStateHookIndex,
+ actionStateHookIndex,
);
}
formData.append('$ACTION_KEY', nextPostbackStateKey);
@@ -818,8 +821,8 @@ if (enableAsyncActions) {
}
if (enableAsyncActions) {
HooksDispatcher.useOptimistic = useOptimistic;
- HooksDispatcher.useFormState = useFormState;
- HooksDispatcher.useActionState = useFormState;
+ HooksDispatcher.useFormState = useActionState;
+ HooksDispatcher.useActionState = useActionState;
}
export let currentResumableState: null | ResumableState = (null: any);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index a0d04998b997..644afc6144df 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -106,8 +106,8 @@ import {
setCurrentResumableState,
getThenableStateAfterSuspending,
unwrapThenable,
- getFormStateCount,
- getFormStateMatchingIndex,
+ getActionStateCount,
+ getActionStateMatchingIndex,
} from './ReactFizzHooks';
import {DefaultCacheDispatcher} from './ReactFizzCache';
import {getStackByComponentStackNode} from './ReactFizzComponentStack';
@@ -1440,8 +1440,8 @@ function renderIndeterminateComponent(
legacyContext,
);
const hasId = checkDidRenderIdHook();
- const formStateCount = getFormStateCount();
- const formStateMatchingIndex = getFormStateMatchingIndex();
+ const actionStateCount = getActionStateCount();
+ const actionStateMatchingIndex = getActionStateMatchingIndex();
if (__DEV__) {
// Support for module components is deprecated and is removed behind a flag.
@@ -1517,8 +1517,8 @@ function renderIndeterminateComponent(
keyPath,
value,
hasId,
- formStateCount,
- formStateMatchingIndex,
+ actionStateCount,
+ actionStateMatchingIndex,
);
}
task.componentStack = previousComponentStack;
@@ -1530,22 +1530,22 @@ function finishFunctionComponent(
keyPath: KeyNode,
children: ReactNodeList,
hasId: boolean,
- formStateCount: number,
- formStateMatchingIndex: number,
+ actionStateCount: number,
+ actionStateMatchingIndex: number,
) {
- let didEmitFormStateMarkers = false;
- if (formStateCount !== 0 && request.formState !== null) {
- // For each useFormState hook, emit a marker that indicates whether we
+ let didEmitActionStateMarkers = false;
+ if (actionStateCount !== 0 && request.formState !== null) {
+ // For each useActionState hook, emit a marker that indicates whether we
// rendered using the form state passed at the root. We only emit these
// markers if form state is passed at the root.
const segment = task.blockedSegment;
if (segment === null) {
// Implies we're in reumable mode.
} else {
- didEmitFormStateMarkers = true;
+ didEmitActionStateMarkers = true;
const target = segment.chunks;
- for (let i = 0; i < formStateCount; i++) {
- if (i === formStateMatchingIndex) {
+ for (let i = 0; i < actionStateCount; i++) {
+ if (i === actionStateMatchingIndex) {
pushFormStateMarkerIsMatching(target);
} else {
pushFormStateMarkerIsNotMatching(target);
@@ -1569,8 +1569,8 @@ function finishFunctionComponent(
// Like the other contexts, this does not need to be in a finally block
// because renderNode takes care of unwinding the stack.
task.treeContext = prevTreeContext;
- } else if (didEmitFormStateMarkers) {
- // If there were formState hooks, we must use the non-destructive path
+ } else if (didEmitActionStateMarkers) {
+ // If there were useActionState hooks, we must use the non-destructive path
// because this component is not a pure indirection; we emitted markers
// to the stream.
renderNode(request, task, children, -1);
@@ -1690,16 +1690,16 @@ function renderForwardRef(
ref,
);
const hasId = checkDidRenderIdHook();
- const formStateCount = getFormStateCount();
- const formStateMatchingIndex = getFormStateMatchingIndex();
+ const actionStateCount = getActionStateCount();
+ const actionStateMatchingIndex = getActionStateMatchingIndex();
finishFunctionComponent(
request,
task,
keyPath,
children,
hasId,
- formStateCount,
- formStateMatchingIndex,
+ actionStateCount,
+ actionStateMatchingIndex,
);
task.componentStack = previousComponentStack;
}
diff --git a/packages/react-server/src/createFastHashJS.js b/packages/react-server/src/createFastHashJS.js
index a72c75a88ff9..063f15a7ccd4 100644
--- a/packages/react-server/src/createFastHashJS.js
+++ b/packages/react-server/src/createFastHashJS.js
@@ -10,7 +10,7 @@
// A pure JS implementation of a string hashing function. We do not use it for
// security or obfuscation purposes, only to create compact hashes. So we
// prioritize speed over collision avoidance. For example, we use this to hash
-// the component key path used by useFormState for MPA-style submissions.
+// the component key path used by useActionState for MPA-style submissions.
//
// In environments where built-in hashing functions are available, we prefer
// those instead. Like Node's crypto module, or Bun.hash. Unfortunately this