Skip to content

[react-dom][useFormState] Allow sync actions #67266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eps1lon merged 8 commits into from
Nov 7, 2023
Merged

[react-dom][useFormState] Allow sync actions #67266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c14e1c
[react-dom][useFormState] Allow sync actions
Nov 1, 2023
cd6b604
Validate types
Nov 1, 2023
d9e073c
Ensure state parameter of the action can't be a Promise
Nov 1, 2023
5b15b2f
Forbid Promise as state
Nov 1, 2023
748f34a
Handle Promise in State type parameter
Nov 5, 2023
9c389c1
Add test for contextual typing
Nov 5, 2023
dc2f1a0
Ensure State is not accepted to be a Promise
Nov 5, 2023
d823c70
Fix 4.9 compat issues
Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions types/react-dom/canary.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,15 @@ declare module "." {
function useFormStatus(): FormStatus;

function useFormState<State>(
action: (state: State) => Promise<State>,
initialState: State,
action: (state: Awaited<State>) => State | Promise<State>,
initialState: Awaited<State>,
permalink?: string,
): [state: State, dispatch: () => void];
): [state: Awaited<State>, dispatch: () => void];
function useFormState<State, Payload>(
action: (state: State, payload: Payload) => Promise<State>,
initialState: State,
action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
initialState: Awaited<State>,
permalink?: string,
): [state: State, dispatch: (payload: Payload) => void];
): [state: Awaited<State>, dispatch: (payload: Payload) => void];
}

declare module "./client" {
Expand Down
74 changes: 70 additions & 4 deletions types/react-dom/test/canary-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ function preloadTest() {
ReactDOM.prefetchDNS("foo");
ReactDOM.prefetchDNS(
"bar", // @ts-expect-error prefetchDNS does not accept any options at the moment
{},
{}
);

// @ts-expect-error
Expand Down Expand Up @@ -128,7 +128,44 @@ function formTest() {
return state + 1;
}

const [state, dispatch] = useFormState(action, 1);
const [
// $ExpectType number
state,
dispatch,
] = useFormState(action, 1);

function actionExpectingPromiseState(state: Promise<number>) {
return state.then((s) => s + 1);
}

useFormState(
// @ts-expect-error
actionExpectingPromiseState,
Promise.resolve(1)
);
useFormState(
action,
// @ts-expect-error
Promise.resolve(1)
);
// $ExpectType number
useFormState<Promise<number>>(action, 1)[0];

useFormState(
async (
prevState: // only needed in TypeScript 4.9
// 5.0 infers `number` whereas 4.9 infers `0`
number
) => prevState + 1,
0
)[0];
// $ExpectType number
useFormState(
async (prevState) => prevState + 1,
// @ts-expect-error
Promise.resolve(0)
)[0];

return (
<button
onClick={() => {
Expand All @@ -145,7 +182,11 @@ function formTest() {
return state + 1;
}

const [state, dispatch] = useFormState(action, 1, "/permalink");
const [
// $ExpectType number
state,
dispatch,
] = useFormState(action, 1, "/permalink");
return (
<form action={dispatch}>
<span>Count: {state}</span>
Expand All @@ -154,12 +195,37 @@ function formTest() {
);
}

function Page3() {
function actionSync(state: number, type: "increment" | "decrement") {
return state + (type === "increment" ? 1 : -1);
}

const [
// $ExpectType number
state,
dispatch,
] = useFormState(actionSync, 1, "/permalink");
return (
<button
onClick={() => {
dispatch("decrement");
}}
>
count: {state}
</button>
);
}

function Page4() {
async function action(state: number, type: "increment" | "decrement") {
return state + (type === "increment" ? 1 : -1);
}

const [state, dispatch] = useFormState(action, 1, "/permalink");
const [
// $ExpectType number
state,
dispatch,
] = useFormState(action, 1, "/permalink");
return (
<button
onClick={() => {
Expand Down