Scaffolding for useFormState

[acdlite]

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:

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.

[react-sizebot]

Comparing: 856dc5e...ba3e43b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	165.59 kB	165.59 kB	=	51.88 kB	51.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.16%	173.15 kB	173.43 kB	+0.08%	54.20 kB	54.24 kB
facebook-www/ReactDOM-prod.classic.js	+0.02%	569.82 kB	569.92 kB	=	100.37 kB	100.38 kB
facebook-www/ReactDOM-prod.modern.js	+0.02%	553.62 kB	553.72 kB	=	97.53 kB	97.54 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+6.17%	1.43 kB	1.51 kB	+1.54%	0.78 kB	0.79 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.25%	1.28 kB	1.34 kB	+0.71%	0.71 kB	0.71 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.15%	1.30 kB	1.37 kB	+0.68%	0.73 kB	0.74 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.97%	1.65 kB	1.73 kB	+1.45%	0.90 kB	0.91 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.45%	1.48 kB	1.55 kB	+1.33%	0.83 kB	0.84 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.37%	1.51 kB	1.58 kB	+1.17%	0.85 kB	0.86 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.development.js	+4.25%	6.56 kB	6.84 kB	+1.92%	2.44 kB	2.49 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.development.js	+4.12%	7.10 kB	7.40 kB	+1.95%	2.57 kB	2.62 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.77%	4.03 kB	4.18 kB	+2.19%	1.37 kB	1.40 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.75%	4.06 kB	4.21 kB	+2.00%	1.40 kB	1.43 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.67%	4.47 kB	4.63 kB	+1.75%	1.49 kB	1.52 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.65%	4.50 kB	4.66 kB	+1.65%	1.52 kB	1.54 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+6.17%	1.43 kB	1.51 kB	+1.54%	0.78 kB	0.79 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.25%	1.28 kB	1.34 kB	+0.71%	0.71 kB	0.71 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+5.15%	1.30 kB	1.37 kB	+0.68%	0.73 kB	0.74 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.97%	1.65 kB	1.73 kB	+1.45%	0.90 kB	0.91 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.45%	1.48 kB	1.55 kB	+1.33%	0.83 kB	0.84 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+4.37%	1.51 kB	1.58 kB	+1.17%	0.85 kB	0.86 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.development.js	+4.25%	6.56 kB	6.84 kB	+1.92%	2.44 kB	2.49 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.development.js	+4.12%	7.10 kB	7.40 kB	+1.95%	2.57 kB	2.62 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.77%	4.03 kB	4.18 kB	+2.19%	1.37 kB	1.40 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.development.js	+3.75%	4.06 kB	4.21 kB	+2.00%	1.40 kB	1.43 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.67%	4.47 kB	4.63 kB	+1.75%	1.49 kB	1.52 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.development.js	+3.65%	4.50 kB	4.66 kB	+1.65%	1.52 kB	1.54 kB
oss-experimental/react-server/cjs/react-server.production.min.js	+0.45%	26.15 kB	26.27 kB	+0.26%	8.89 kB	8.91 kB
oss-experimental/react-art/cjs/react-art.development.js	+0.28%	827.87 kB	830.19 kB	+0.10%	180.91 kB	181.09 kB
oss-experimental/react-art/umd/react-art.development.js	+0.26%	943.82 kB	946.25 kB	+0.09%	199.97 kB	200.15 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js	+0.25%	925.81 kB	928.13 kB	+0.09%	198.84 kB	199.02 kB
oss-experimental/react-server/cjs/react-server.development.js	+0.20%	150.42 kB	150.72 kB	+0.15%	37.40 kB	37.46 kB

Generated by 🚫 dangerJS against ba3e43b

[karlhorky]

Oh cool 👀 is this the new name of useAction / useActionState that Dan mentioned on Twitter a few times?

https://twitter.com/karlhorky/status/1695391901220802860

[robertwbradford]

Hello, this is a super-useful feature, thank you. I first came across it in the Next docs and brought up this discussion there.

Still trying to separate what is a Next.js feature and what is a React feature, but I was curious about the order of arguments. In Next, when creating a Server Action and using it in a <form action={myAction}> without also using useFormState, formData is the action's first argument.

However, if that action is then used in form with useFormState, the formData needs to be the second argument. It threw me off until I discovered that—kept getting undefined form data.

I get that useFormState is returning a different action function, but an author of an action function now needs to know what forms the action will be used in and provide two signatures depending on whether useFormState was used.

Again, I don't want to conflate Next.j features with React features, but I was under the assumption that this was all part of the "React Actions" feature.

I couldn't find another discussion on this, but please point me to the right place if there is. Thank you.