s/form state/action state (#28631)
Rename internals from "form state" to "action state"
Ricky committed
Mar 28, 2024 at 11:34 UTC
05797ccebd285999343ab4fb94eb542f84be23b1
8 files changed
+116
-113
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+2
-2
@@ -6187,8 +6187,8 @@ describe('ReactDOMFizzServer', () => {
6187
// Because of the render phase update above, this component is evaluated
6188
// multiple times (even during SSR), but it should only emit a single
6189
// marker per useActionState instance.
6190
- const [formState] = useActionState(action, 0);
6191
- const text = `${readText('Child')}:${formState}:${localState}`;
6190
+ const [actionState] = useActionState(action, 0);
6191
+ const text = `${readText('Child')}:${actionState}:${localState}`;
6192
return (
6193
<div id="child" ref={childRef}>
6194
{text}
packages/react-dom/src/__tests__/ReactDOMForm-test.js
+1
-1
@@ -1280,7 +1280,7 @@ describe('ReactDOMForm', () => {
1280
});
1281
1282
// @gate enableAsyncActions
1283
- test('useFormState works in StrictMode', async () => {
1283
+ test('useActionState works in StrictMode', async () => {
1284
let actionCounter = 0;
1285
async function action(state, type) {
1286
actionCounter++;
packages/react-reconciler/src/ReactFiberHooks.js
+55
-55
@@ -1889,9 +1889,9 @@ function rerenderOptimistic<S, A>(
1889
return [passthrough, dispatch];
1890
}
1891
1892
-// useFormState actions run sequentially, because each action receives the
1892
+// useActionState actions run sequentially, because each action receives the
1893
// previous state as an argument. We store pending actions on a queue.
1894
-type FormStateActionQueue<S, P> = {
1894
+type ActionStateQueue<S, P> = {
1895
// This is the most recent state returned from an action. It's updated as
1896
// soon as the action finishes running.
1897
state: Awaited<S>,
@@ -1902,18 +1902,18 @@ type FormStateActionQueue<S, P> = {
1902
action: (Awaited<S>, P) => S,
1903
// This is a circular linked list of pending action payloads. It incudes the
1904
// action that is currently running.
1905
- pending: FormStateActionQueueNode<P> | null,
1905
+ pending: ActionStateQueueNode<P> | null,
1906
};
1907
1908
-type FormStateActionQueueNode<P> = {
1908
+type ActionStateQueueNode<P> = {
1909
payload: P,
1910
// This is never null because it's part of a circular linked list.
1911
- next: FormStateActionQueueNode<P>,
1911
+ next: ActionStateQueueNode<P>,
1912
};
1913
1914
-function dispatchFormState<S, P>(
1914
+function dispatchActionState<S, P>(
1915
fiber: Fiber,
1916
- actionQueue: FormStateActionQueue<S, P>,
1916
+ actionQueue: ActionStateQueue<S, P>,
1917
setPendingState: boolean => void,
1918
setState: Dispatch<S | Awaited<S>>,
1919
payload: P,
@@ -1925,13 +1925,13 @@ function dispatchFormState<S, P>(
1925
if (last === null) {
1926
// There are no pending actions; this is the first one. We can run
1927
// it immediately.
1928
- const newLast: FormStateActionQueueNode<P> = {
1928
+ const newLast: ActionStateQueueNode<P> = {
1929
payload,
1930
next: (null: any), // circular
1931
};
1932
newLast.next = actionQueue.pending = newLast;
1933
1934
- runFormStateAction(
1934
+ runActionStateAction(
1935
actionQueue,
1936
(setPendingState: any),
1937
(setState: any),
@@ -1940,7 +1940,7 @@ function dispatchFormState<S, P>(
1940
} else {
1941
// There's already an action running. Add to the queue.
1942
const first = last.next;
1943
- const newLast: FormStateActionQueueNode<P> = {
1943
+ const newLast: ActionStateQueueNode<P> = {
1944
payload,
1945
next: first,
1946
};
@@ -1948,8 +1948,8 @@ function dispatchFormState<S, P>(
1948
}
1949
}
1950
1951
-function runFormStateAction<S, P>(
1952
- actionQueue: FormStateActionQueue<S, P>,
1951
+function runActionStateAction<S, P>(
1952
+ actionQueue: ActionStateQueue<S, P>,
1953
setPendingState: boolean => void,
1954
setState: Dispatch<S | Awaited<S>>,
1955
payload: P,
@@ -1987,14 +1987,14 @@ function runFormStateAction<S, P>(
1987
thenable.then(
1988
(nextState: Awaited<S>) => {
1989
actionQueue.state = nextState;
1990
- finishRunningFormStateAction(
1990
+ finishRunningActionStateAction(
1991
actionQueue,
1992
(setPendingState: any),
1993
(setState: any),
1994
);
1995
},
1996
() =>
1997
- finishRunningFormStateAction(
1997
+ finishRunningActionStateAction(
1998
actionQueue,
1999
(setPendingState: any),
2000
(setState: any),
@@ -2007,14 +2007,14 @@ function runFormStateAction<S, P>(
2007
2008
const nextState = ((returnValue: any): Awaited<S>);
2009
actionQueue.state = nextState;
2010
- finishRunningFormStateAction(
2010
+ finishRunningActionStateAction(
2011
actionQueue,
2012
(setPendingState: any),
2013
(setState: any),
2014
);
2015
}
2016
} catch (error) {
2017
- // This is a trick to get the `useFormState` hook to rethrow the error.
2017
+ // This is a trick to get the `useActionState` hook to rethrow the error.
2018
// When it unwraps the thenable with the `use` algorithm, the error
2019
// will be thrown.
2020
const rejectedThenable: S = ({
@@ -2024,7 +2024,7 @@ function runFormStateAction<S, P>(
2024
// $FlowFixMe: Not sure why this doesn't work
2025
}: RejectedThenable<Awaited<S>>);
2026
setState(rejectedThenable);
2027
- finishRunningFormStateAction(
2027
+ finishRunningActionStateAction(
2028
actionQueue,
2029
(setPendingState: any),
2030
(setState: any),
@@ -2048,8 +2048,8 @@ function runFormStateAction<S, P>(
2048
}
2049
}
2050
2051
-function finishRunningFormStateAction<S, P>(
2052
- actionQueue: FormStateActionQueue<S, P>,
2051
+function finishRunningActionStateAction<S, P>(
2052
+ actionQueue: ActionStateQueue<S, P>,
2053
setPendingState: Dispatch<S | Awaited<S>>,
2054
setState: Dispatch<S | Awaited<S>>,
2055
) {
@@ -2067,7 +2067,7 @@ function finishRunningFormStateAction<S, P>(
2067
last.next = next;
2068
2069
// Run the next action.
2070
- runFormStateAction(
2070
+ runActionStateAction(
2071
actionQueue,
2072
(setPendingState: any),
2073
(setState: any),
@@ -2077,11 +2077,11 @@ function finishRunningFormStateAction<S, P>(
2077
}
2078
}
2079
2080
-function formStateReducer<S>(oldState: S, newState: S): S {
2080
+function actionStateReducer<S>(oldState: S, newState: S): S {
2081
return newState;
2082
}
2083
2084
-function mountFormState<S, P>(
2084
+function mountActionState<S, P>(
2085
action: (Awaited<S>, P) => S,
2086
initialStateProp: Awaited<S>,
2087
permalink?: string,
@@ -2113,7 +2113,7 @@ function mountFormState<S, P>(
2113
pending: null,
2114
lanes: NoLanes,
2115
dispatch: (null: any),
2116
- lastRenderedReducer: formStateReducer,
2116
+ lastRenderedReducer: actionStateReducer,
2117
lastRenderedState: initialState,
2118
};
2119
stateHook.queue = stateQueue;
@@ -2142,14 +2142,14 @@ function mountFormState<S, P>(
2142
// but different because the actions are run sequentially, and they run in
2143
// an event instead of during render.
2144
const actionQueueHook = mountWorkInProgressHook();
2145
- const actionQueue: FormStateActionQueue<S, P> = {
2145
+ const actionQueue: ActionStateQueue<S, P> = {
2146
state: initialState,
2147
dispatch: (null: any), // circular
2148
action,
2149
pending: null,
2150
};
2151
actionQueueHook.queue = actionQueue;
2152
- const dispatch = (dispatchFormState: any).bind(
2152
+ const dispatch = (dispatchActionState: any).bind(
2153
null,
2154
currentlyRenderingFiber,
2155
actionQueue,
@@ -2166,14 +2166,14 @@ function mountFormState<S, P>(
2166
return [initialState, dispatch, false];
2167
}
2168
2169
-function updateFormState<S, P>(
2169
+function updateActionState<S, P>(
2170
action: (Awaited<S>, P) => S,
2171
initialState: Awaited<S>,
2172
permalink?: string,
2173
): [Awaited<S>, (P) => void, boolean] {
2174
const stateHook = updateWorkInProgressHook();
2175
const currentStateHook = ((currentHook: any): Hook);
2176
- return updateFormStateImpl(
2176
+ return updateActionStateImpl(
2177
stateHook,
2178
currentStateHook,
2179
action,
@@ -2182,7 +2182,7 @@ function updateFormState<S, P>(
2182
);
2183
}
2184
2185
-function updateFormStateImpl<S, P>(
2185
+function updateActionStateImpl<S, P>(
2186
stateHook: Hook,
2187
currentStateHook: Hook,
2188
action: (Awaited<S>, P) => S,
@@ -2192,7 +2192,7 @@ function updateFormStateImpl<S, P>(
2192
const [actionResult] = updateReducerImpl<S | Thenable<S>, S | Thenable<S>>(
2193
stateHook,
2194
currentStateHook,
2195
- formStateReducer,
2195
+ actionStateReducer,
2196
);
2197
2198
const [isPending] = updateState(false);
@@ -2216,7 +2216,7 @@ function updateFormStateImpl<S, P>(
2216
currentlyRenderingFiber.flags |= PassiveEffect;
2217
pushEffect(
2218
HookHasEffect | HookPassive,
2219
- formStateActionEffect.bind(null, actionQueue, action),
2219
+ actionStateActionEffect.bind(null, actionQueue, action),
2220
createEffectInstance(),
2221
null,
2222
);
@@ -2225,19 +2225,19 @@ function updateFormStateImpl<S, P>(
2225
return [state, dispatch, isPending];
2226
}
2227
2228
-function formStateActionEffect<S, P>(
2229
- actionQueue: FormStateActionQueue<S, P>,
2228
+function actionStateActionEffect<S, P>(
2229
+ actionQueue: ActionStateQueue<S, P>,
2230
action: (Awaited<S>, P) => S,
2231
): void {
2232
actionQueue.action = action;
2233
}
2234
2235
-function rerenderFormState<S, P>(
2235
+function rerenderActionState<S, P>(
2236
action: (Awaited<S>, P) => S,
2237
initialState: Awaited<S>,
2238
permalink?: string,
2239
): [Awaited<S>, (P) => void, boolean] {
2240
- // Unlike useState, useFormState doesn't support render phase updates.
2240
+ // Unlike useState, useActionState doesn't support render phase updates.
2241
// Also unlike useState, we need to replay all pending updates again in case
2242
// the passthrough value changed.
2243
//
@@ -2249,7 +2249,7 @@ function rerenderFormState<S, P>(
2249
2250
if (currentStateHook !== null) {
2251
// This is an update. Process the update queue.
2252
- return updateFormStateImpl(
2252
+ return updateActionStateImpl(
2253
stateHook,
2254
currentStateHook,
2255
action,
@@ -3548,8 +3548,8 @@ if (enableUseEffectEventHook) {
3548
if (enableAsyncActions) {
3549
(HooksDispatcherOnMount: Dispatcher).useHostTransitionStatus =
3550
useHostTransitionStatus;
3551
- (HooksDispatcherOnMount: Dispatcher).useFormState = mountFormState;
3552
- (HooksDispatcherOnMount: Dispatcher).useActionState = mountFormState;
3551
+ (HooksDispatcherOnMount: Dispatcher).useFormState = mountActionState;
3552
+ (HooksDispatcherOnMount: Dispatcher).useActionState = mountActionState;
3553
}
3554
if (enableAsyncActions) {
3555
(HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
@@ -3587,8 +3587,8 @@ if (enableUseEffectEventHook) {
3587
if (enableAsyncActions) {
3588
(HooksDispatcherOnUpdate: Dispatcher).useHostTransitionStatus =
3589
useHostTransitionStatus;
3590
- (HooksDispatcherOnUpdate: Dispatcher).useFormState = updateFormState;
3591
- (HooksDispatcherOnUpdate: Dispatcher).useActionState = updateFormState;
3590
+ (HooksDispatcherOnUpdate: Dispatcher).useFormState = updateActionState;
3591
+ (HooksDispatcherOnUpdate: Dispatcher).useActionState = updateActionState;
3592
}
3593
if (enableAsyncActions) {
3594
(HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
@@ -3626,8 +3626,8 @@ if (enableUseEffectEventHook) {
3626
if (enableAsyncActions) {
3627
(HooksDispatcherOnRerender: Dispatcher).useHostTransitionStatus =
3628
useHostTransitionStatus;
3629
- (HooksDispatcherOnRerender: Dispatcher).useFormState = rerenderFormState;
3630
- (HooksDispatcherOnRerender: Dispatcher).useActionState = rerenderFormState;
3629
+ (HooksDispatcherOnRerender: Dispatcher).useFormState = rerenderActionState;
3630
+ (HooksDispatcherOnRerender: Dispatcher).useActionState = rerenderActionState;
3631
}
3632
if (enableAsyncActions) {
3633
(HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
@@ -3820,7 +3820,7 @@ if (__DEV__) {
3820
): [Awaited<S>, (P) => void, boolean] {
3821
currentHookNameInDev = 'useFormState';
3822
mountHookTypesDev();
3823
- return mountFormState(action, initialState, permalink);
3823
+ return mountActionState(action, initialState, permalink);
3824
};
3825
(HooksDispatcherOnMountInDEV: Dispatcher).useActionState =
3826
function useActionState<S, P>(
@@ -3830,7 +3830,7 @@ if (__DEV__) {
3830
): [Awaited<S>, (P) => void, boolean] {
3831
currentHookNameInDev = 'useActionState';
3832
mountHookTypesDev();
3833
- return mountFormState(action, initialState, permalink);
3833
+ return mountActionState(action, initialState, permalink);
3834
};
3835
}
3836
if (enableAsyncActions) {
@@ -4000,7 +4000,7 @@ if (__DEV__) {
4000
): [Awaited<S>, (P) => void, boolean] {
4001
currentHookNameInDev = 'useFormState';
4002
updateHookTypesDev();
4003
- return mountFormState(action, initialState, permalink);
4003
+ return mountActionState(action, initialState, permalink);
4004
};
4005
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useActionState =
4006
function useActionState<S, P>(
@@ -4010,7 +4010,7 @@ if (__DEV__) {
4010
): [Awaited<S>, (P) => void, boolean] {
4011
currentHookNameInDev = 'useActionState';
4012
updateHookTypesDev();
4013
- return mountFormState(action, initialState, permalink);
4013
+ return mountActionState(action, initialState, permalink);
4014
};
4015
}
4016
if (enableAsyncActions) {
@@ -4182,7 +4182,7 @@ if (__DEV__) {
4182
): [Awaited<S>, (P) => void, boolean] {
4183
currentHookNameInDev = 'useFormState';
4184
updateHookTypesDev();
4185
- return updateFormState(action, initialState, permalink);
4185
+ return updateActionState(action, initialState, permalink);
4186
};
4187
(HooksDispatcherOnUpdateInDEV: Dispatcher).useActionState =
4188
function useActionState<S, P>(
@@ -4192,7 +4192,7 @@ if (__DEV__) {
4192
): [Awaited<S>, (P) => void, boolean] {
4193
currentHookNameInDev = 'useActionState';
4194
updateHookTypesDev();
4195
- return updateFormState(action, initialState, permalink);
4195
+ return updateActionState(action, initialState, permalink);
4196
};
4197
}
4198
if (enableAsyncActions) {
@@ -4364,7 +4364,7 @@ if (__DEV__) {
4364
): [Awaited<S>, (P) => void, boolean] {
4365
currentHookNameInDev = 'useFormState';
4366
updateHookTypesDev();
4367
- return rerenderFormState(action, initialState, permalink);
4367
+ return rerenderActionState(action, initialState, permalink);
4368
};
4369
(HooksDispatcherOnRerenderInDEV: Dispatcher).useActionState =
4370
function useActionState<S, P>(
@@ -4374,7 +4374,7 @@ if (__DEV__) {
4374
): [Awaited<S>, (P) => void, boolean] {
4375
currentHookNameInDev = 'useActionState';
4376
updateHookTypesDev();
4377
- return rerenderFormState(action, initialState, permalink);
4377
+ return rerenderActionState(action, initialState, permalink);
4378
};
4379
}
4380
if (enableAsyncActions) {
@@ -4568,7 +4568,7 @@ if (__DEV__) {
4568
currentHookNameInDev = 'useFormState';
4569
warnInvalidHookAccess();
4570
mountHookTypesDev();
4571
- return mountFormState(action, initialState, permalink);
4571
+ return mountActionState(action, initialState, permalink);
4572
};
4573
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useActionState =
4574
function useActionState<S, P>(
@@ -4579,7 +4579,7 @@ if (__DEV__) {
4579
currentHookNameInDev = 'useActionState';
4580
warnInvalidHookAccess();
4581
mountHookTypesDev();
4582
- return mountFormState(action, initialState, permalink);
4582
+ return mountActionState(action, initialState, permalink);
4583
};
4584
}
4585
if (enableAsyncActions) {
@@ -4777,7 +4777,7 @@ if (__DEV__) {
4777
currentHookNameInDev = 'useFormState';
4778
warnInvalidHookAccess();
4779
updateHookTypesDev();
4780
- return updateFormState(action, initialState, permalink);
4780
+ return updateActionState(action, initialState, permalink);
4781
};
4782
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useActionState =
4783
function useActionState<S, P>(
@@ -4788,7 +4788,7 @@ if (__DEV__) {
4788
currentHookNameInDev = 'useActionState';
4789
warnInvalidHookAccess();
4790
updateHookTypesDev();
4791
- return updateFormState(action, initialState, permalink);
4791
+ return updateActionState(action, initialState, permalink);
4792
};
4793
}
4794
if (enableAsyncActions) {
@@ -4986,7 +4986,7 @@ if (__DEV__) {
4986
currentHookNameInDev = 'useFormState';
4987
warnInvalidHookAccess();
4988
updateHookTypesDev();
4989
- return rerenderFormState(action, initialState, permalink);
4989
+ return rerenderActionState(action, initialState, permalink);
4990
};
4991
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useActionState =
4992
function useActionState<S, P>(
@@ -4997,7 +4997,7 @@ if (__DEV__) {
4997
currentHookNameInDev = 'useActionState';
4998
warnInvalidHookAccess();
4999
updateHookTypesDev();
5000
- return rerenderFormState(action, initialState, permalink);
5000
+ return rerenderActionState(action, initialState, permalink);
5001
};
5002
}
5003
if (enableAsyncActions) {
packages/react-reconciler/src/ReactFiberHydrationContext.js
+1
-1
@@ -439,7 +439,7 @@ export function tryToClaimNextHydratableFormMarkerInstance(
439
}
440
// Should have found a marker instance. Throw an error to trigger client
441
// rendering. We don't bother to check if we're in a concurrent root because
442
- // useFormState is a new API, so backwards compat is not an issue.
442
+ // useActionState is a new API, so backwards compat is not an issue.
443
throwOnHydrationMismatch(fiber);
444
return false;
445
}
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
+1
-1
@@ -892,7 +892,7 @@ describe('ReactFlightDOMForm', () => {
892
});
893
894
// @gate enableAsyncActions
895
- it('useFormState can return JSX state during MPA form submission', async () => {
895
+ it('useActionState can return JSX state during MPA form submission', async () => {
896
const serverAction = serverExports(
897
async function action(prevState, formData) {
898
return <div>error message</div>;
packages/react-server/src/ReactFizzHooks.js
+35
-32
@@ -78,11 +78,11 @@ let didScheduleRenderPhaseUpdate: boolean = false;
78
let localIdCounter: number = 0;
79
// Chunks that should be pushed to the stream once the component
80
// finishes rendering.
81
-// Counts the number of useFormState calls in this component
82
-let formStateCounter: number = 0;
83
-// The index of the useFormState hook that matches the one passed in at the
81
+// Counts the number of useActionState calls in this component
82
+let actionStateCounter: number = 0;
83
+// The index of the useActionState hook that matches the one passed in at the
84
// root during an MPA navigation, if any.
85
-let formStateMatchingIndex: number = -1;
85
+let actionStateMatchingIndex: number = -1;
86
// Counts the number of use(thenable) calls in this component
87
let thenableIndexCounter: number = 0;
88
let thenableState: ThenableState | null = null;
@@ -223,8 +223,8 @@ export function prepareToUseHooks(
223
// workInProgressHook = null;
224
225
localIdCounter = 0;
226
- formStateCounter = 0;
227
- formStateMatchingIndex = -1;
226
+ actionStateCounter = 0;
227
+ actionStateMatchingIndex = -1;
228
thenableIndexCounter = 0;
229
thenableState = prevThenableState;
230
}
@@ -245,8 +245,8 @@ export function finishHooks(
245
// restarting until no more updates are scheduled.
246
didScheduleRenderPhaseUpdate = false;
247
localIdCounter = 0;
248
- formStateCounter = 0;
249
- formStateMatchingIndex = -1;
248
+ actionStateCounter = 0;
249
+ actionStateMatchingIndex = -1;
250
thenableIndexCounter = 0;
251
numberOfReRenders += 1;
252
@@ -274,17 +274,17 @@ export function checkDidRenderIdHook(): boolean {
274
return didRenderIdHook;
275
}
276
277
-export function getFormStateCount(): number {
277
+export function getActionStateCount(): number {
278
// This should be called immediately after every finishHooks call.
279
// Conceptually, it's part of the return value of finishHooks; it's only a
280
// separate function to avoid using an array tuple.
281
- return formStateCounter;
281
+ return actionStateCounter;
282
}
283
-export function getFormStateMatchingIndex(): number {
283
+export function getActionStateMatchingIndex(): number {
284
// This should be called immediately after every finishHooks call.
285
// Conceptually, it's part of the return value of finishHooks; it's only a
286
// separate function to avoid using an array tuple.
287
- return formStateMatchingIndex;
287
+ return actionStateMatchingIndex;
288
}
289
290
// Reset the internal hooks state if an error occurs while rendering a component
@@ -591,7 +591,7 @@ function useOptimistic<S, A>(
591
return [passthrough, unsupportedSetOptimisticState];
592
}
593
594
-function createPostbackFormStateKey(
594
+function createPostbackActionStateKey(
595
permalink: string | void,
596
componentKeyPath: KeyNode | null,
597
hookIndex: number,
@@ -610,17 +610,17 @@ function createPostbackFormStateKey(
610
}
611
}
612
613
-function useFormState<S, P>(
613
+function useActionState<S, P>(
614
action: (Awaited<S>, P) => S,
615
initialState: Awaited<S>,
616
permalink?: string,
617
): [Awaited<S>, (P) => void, boolean] {
618
resolveCurrentlyRenderingComponent();
619
620
- // Count the number of useFormState hooks per component. We also use this to
621
- // track the position of this useFormState hook relative to the other ones in
620
+ // Count the number of useActionState hooks per component. We also use this to
621
+ // track the position of this useActionState hook relative to the other ones in
622
// this component, so we can generate a unique key for each one.
623
- const formStateHookIndex = formStateCounter++;
623
+ const actionStateHookIndex = actionStateCounter++;
624
const request: Request = (currentlyRenderingRequest: any);
625
626
// $FlowIgnore[prop-missing]
@@ -629,7 +629,7 @@ function useFormState<S, P>(
629
// This is a server action. These have additional features to enable
630
// MPA-style form submissions with progressive enhancement.
631
632
- // TODO: If the same permalink is passed to multiple useFormStates, and
632
+ // TODO: If the same permalink is passed to multiple useActionStates, and
633
// they all have the same action signature, Fizz will pass the postback
634
// state to all of them. We should probably only pass it to the first one,
635
// and/or warn.
@@ -640,30 +640,33 @@ function useFormState<S, P>(
640
641
// Determine the current form state. If we received state during an MPA form
642
// submission, then we will reuse that, if the action identity matches.
643
- // Otherwise we'll use the initial state argument. We will emit a comment
643
+ // Otherwise, we'll use the initial state argument. We will emit a comment
644
// marker into the stream that indicates whether the state was reused.
645
let state = initialState;
646
const componentKeyPath = (currentlyRenderingKeyPath: any);
647
- const postbackFormState = getFormState(request);
647
+ const postbackActionState = getFormState(request);
648
// $FlowIgnore[prop-missing]
649
const isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
650
- if (postbackFormState !== null && typeof isSignatureEqual === 'function') {
651
- const postbackKey = postbackFormState[1];
652
- const postbackReferenceId = postbackFormState[2];
653
- const postbackBoundArity = postbackFormState[3];
650
+ if (
651
+ postbackActionState !== null &&
652
+ typeof isSignatureEqual === 'function'
653
+ ) {
654
+ const postbackKey = postbackActionState[1];
655
+ const postbackReferenceId = postbackActionState[2];
656
+ const postbackBoundArity = postbackActionState[3];
657
if (
658
isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
659
) {
657
- nextPostbackStateKey = createPostbackFormStateKey(
660
+ nextPostbackStateKey = createPostbackActionStateKey(
661
permalink,
662
componentKeyPath,
660
- formStateHookIndex,
663
+ actionStateHookIndex,
664
);
665
if (postbackKey === nextPostbackStateKey) {
666
// This was a match
664
- formStateMatchingIndex = formStateHookIndex;
667
+ actionStateMatchingIndex = actionStateHookIndex;
668
// Reuse the state that was submitted by the form.
666
- state = postbackFormState[0];
669
+ state = postbackActionState[0];
670
}
671
}
672
}
@@ -695,10 +698,10 @@ function useFormState<S, P>(
698
const formData = metadata.data;
699
if (formData) {
700
if (nextPostbackStateKey === null) {
698
- nextPostbackStateKey = createPostbackFormStateKey(
701
+ nextPostbackStateKey = createPostbackActionStateKey(
702
permalink,
703
componentKeyPath,
701
- formStateHookIndex,
704
+ actionStateHookIndex,
705
);
706
}
707
formData.append('$ACTION_KEY', nextPostbackStateKey);
@@ -818,8 +821,8 @@ if (enableAsyncActions) {
821
}
822
if (enableAsyncActions) {
823
HooksDispatcher.useOptimistic = useOptimistic;
821
- HooksDispatcher.useFormState = useFormState;
822
- HooksDispatcher.useActionState = useFormState;
824
+ HooksDispatcher.useFormState = useActionState;
825
+ HooksDispatcher.useActionState = useActionState;
826
}
827
828
export let currentResumableState: null | ResumableState = (null: any);
packages/react-server/src/ReactFizzServer.js
+20
-20
@@ -106,8 +106,8 @@ import {
106
setCurrentResumableState,
107
getThenableStateAfterSuspending,
108
unwrapThenable,
109
- getFormStateCount,
110
- getFormStateMatchingIndex,
109
+ getActionStateCount,
110
+ getActionStateMatchingIndex,
111
} from './ReactFizzHooks';
112
import {DefaultCacheDispatcher} from './ReactFizzCache';
113
import {getStackByComponentStackNode} from './ReactFizzComponentStack';
@@ -1440,8 +1440,8 @@ function renderIndeterminateComponent(
1440
legacyContext,
1441
);
1442
const hasId = checkDidRenderIdHook();
1443
- const formStateCount = getFormStateCount();
1444
- const formStateMatchingIndex = getFormStateMatchingIndex();
1443
+ const actionStateCount = getActionStateCount();
1444
+ const actionStateMatchingIndex = getActionStateMatchingIndex();
1445
1446
if (__DEV__) {
1447
// Support for module components is deprecated and is removed behind a flag.
@@ -1517,8 +1517,8 @@ function renderIndeterminateComponent(
1517
keyPath,
1518
value,
1519
hasId,
1520
- formStateCount,
1521
- formStateMatchingIndex,
1520
+ actionStateCount,
1521
+ actionStateMatchingIndex,
1522
);
1523
}
1524
task.componentStack = previousComponentStack;
@@ -1530,22 +1530,22 @@ function finishFunctionComponent(
1530
keyPath: KeyNode,
1531
children: ReactNodeList,
1532
hasId: boolean,
1533
- formStateCount: number,
1534
- formStateMatchingIndex: number,
1533
+ actionStateCount: number,
1534
+ actionStateMatchingIndex: number,
1535
) {
1536
- let didEmitFormStateMarkers = false;
1537
- if (formStateCount !== 0 && request.formState !== null) {
1538
- // For each useFormState hook, emit a marker that indicates whether we
1536
+ let didEmitActionStateMarkers = false;
1537
+ if (actionStateCount !== 0 && request.formState !== null) {
1538
+ // For each useActionState hook, emit a marker that indicates whether we
1539
// rendered using the form state passed at the root. We only emit these
1540
// markers if form state is passed at the root.
1541
const segment = task.blockedSegment;
1542
if (segment === null) {
1543
// Implies we're in reumable mode.
1544
} else {
1545
- didEmitFormStateMarkers = true;
1545
+ didEmitActionStateMarkers = true;
1546
const target = segment.chunks;
1547
- for (let i = 0; i < formStateCount; i++) {
1548
- if (i === formStateMatchingIndex) {
1547
+ for (let i = 0; i < actionStateCount; i++) {
1548
+ if (i === actionStateMatchingIndex) {
1549
pushFormStateMarkerIsMatching(target);
1550
} else {
1551
pushFormStateMarkerIsNotMatching(target);
@@ -1569,8 +1569,8 @@ function finishFunctionComponent(
1569
// Like the other contexts, this does not need to be in a finally block
1570
// because renderNode takes care of unwinding the stack.
1571
task.treeContext = prevTreeContext;
1572
- } else if (didEmitFormStateMarkers) {
1573
- // If there were formState hooks, we must use the non-destructive path
1572
+ } else if (didEmitActionStateMarkers) {
1573
+ // If there were useActionState hooks, we must use the non-destructive path
1574
// because this component is not a pure indirection; we emitted markers
1575
// to the stream.
1576
renderNode(request, task, children, -1);
@@ -1690,16 +1690,16 @@ function renderForwardRef(
1690
ref,
1691
);
1692
const hasId = checkDidRenderIdHook();
1693
- const formStateCount = getFormStateCount();
1694
- const formStateMatchingIndex = getFormStateMatchingIndex();
1693
+ const actionStateCount = getActionStateCount();
1694
+ const actionStateMatchingIndex = getActionStateMatchingIndex();
1695
finishFunctionComponent(
1696
request,
1697
task,
1698
keyPath,
1699
children,
1700
hasId,
1701
- formStateCount,
1702
- formStateMatchingIndex,
1701
+ actionStateCount,
1702
+ actionStateMatchingIndex,
1703
);
1704
task.componentStack = previousComponentStack;
1705
}
packages/react-server/src/createFastHashJS.js
+1
-1
@@ -10,7 +10,7 @@
10
// A pure JS implementation of a string hashing function. We do not use it for
11
// security or obfuscation purposes, only to create compact hashes. So we
12
// prioritize speed over collision avoidance. For example, we use this to hash
13
-// the component key path used by useFormState for MPA-style submissions.
13
+// the component key path used by useActionState for MPA-style submissions.
14
//
15
// In environments where built-in hashing functions are available, we prefer
16
// those instead. Like Node's crypto module, or Bun.hash. Unfortunately this