mirror of
https://github.com/facebook/react.git
synced 2026-02-26 07:55:55 +00:00
b4cdd3e892
This exposes, but does not yet implement, a new experimental API called
useFormState. It's gated behind the enableAsyncActions flag.
useFormState has a similar signature to useReducer, except instead of a
reducer it accepts an (async) action function. React will wait until the
promise resolves before updating the state:
```js
async function action(prevState, payload) {
// ..
}
const [state, dispatch] = useFormState(action, initialState)
```
When used in combination with Server Actions, it will also support
progressive enhancement — a form that is submitted before it has
hydrated will have its state transferred to the next page. However, like
the other action-related hooks, it works with fully client-driven
actions, too.
91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
|
|
|
|
import {enableAsyncActions, enableFormActions} from 'shared/ReactFeatureFlags';
|
|
import ReactSharedInternals from 'shared/ReactSharedInternals';
|
|
|
|
const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
|
|
|
|
type FormStatusNotPending = {|
|
|
pending: false,
|
|
data: null,
|
|
method: null,
|
|
action: null,
|
|
|};
|
|
|
|
type FormStatusPending = {|
|
|
pending: true,
|
|
data: FormData,
|
|
method: string,
|
|
action: string | (FormData => void | Promise<void>),
|
|
|};
|
|
|
|
export type FormStatus = FormStatusPending | FormStatusNotPending;
|
|
|
|
// Since the "not pending" value is always the same, we can reuse the
|
|
// same object across all transitions.
|
|
const sharedNotPendingObject = {
|
|
pending: false,
|
|
data: null,
|
|
method: null,
|
|
action: null,
|
|
};
|
|
|
|
export const NotPending: FormStatus = __DEV__
|
|
? Object.freeze(sharedNotPendingObject)
|
|
: sharedNotPendingObject;
|
|
|
|
function resolveDispatcher() {
|
|
// Copied from react/src/ReactHooks.js. It's the same thing but in a
|
|
// different package.
|
|
const dispatcher = ReactCurrentDispatcher.current;
|
|
if (__DEV__) {
|
|
if (dispatcher === null) {
|
|
console.error(
|
|
'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
|
|
' one of the following reasons:\n' +
|
|
'1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
|
|
'2. You might be breaking the Rules of Hooks\n' +
|
|
'3. You might have more than one copy of React in the same app\n' +
|
|
'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
|
|
);
|
|
}
|
|
}
|
|
// Will result in a null access error if accessed outside render phase. We
|
|
// intentionally don't throw our own error because this is in a hot path.
|
|
// Also helps ensure this is inlined.
|
|
return ((dispatcher: any): Dispatcher);
|
|
}
|
|
|
|
export function useFormStatus(): FormStatus {
|
|
if (!(enableFormActions && enableAsyncActions)) {
|
|
throw new Error('Not implemented.');
|
|
} else {
|
|
const dispatcher = resolveDispatcher();
|
|
// $FlowFixMe[not-a-function] We know this exists because of the feature check above.
|
|
return dispatcher.useHostTransitionStatus();
|
|
}
|
|
}
|
|
|
|
export function useFormState<S, P>(
|
|
action: (S, P) => S,
|
|
initialState: S,
|
|
url?: string,
|
|
): [S, (P) => void] {
|
|
if (!(enableFormActions && enableAsyncActions)) {
|
|
throw new Error('Not implemented.');
|
|
} else {
|
|
const dispatcher = resolveDispatcher();
|
|
// $FlowFixMe[not-a-function] This is unstable, thus optional
|
|
return dispatcher.useFormState(action, initialState, url);
|
|
}
|
|
}
|