Client implementation of useFormState #27278

acdlite · 2023-08-24T23:16:02Z

This implements useFormState in Fiber. (It does not include any progressive enhancement features; those will be added later.)

useFormState is a hook for tracking state produced by async actions. It has a signature similar to useReducer, but instead of a reducer, it accepts an async action function.

async function action(prevState, payload) {
  // ..
}
const [state, dispatch] = useFormState(action, initialState)

Calling dispatch runs the async action and updates the state to the returned value.

Async actions run before React's render cycle, so unlike reducers, they can contain arbitrary side effects.

react-sizebot · 2023-08-24T23:19:48Z

Comparing: 9a01c8b...a4a9273

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.61 kB	165.61 kB	=	51.88 kB	51.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.69%	173.49 kB	174.69 kB	+0.65%	54.26 kB	54.61 kB
facebook-www/ReactDOM-prod.classic.js	+0.08%	569.96 kB	570.39 kB	+0.05%	100.39 kB	100.44 kB
facebook-www/ReactDOM-prod.modern.js	+0.08%	553.76 kB	554.19 kB	+0.06%	97.55 kB	97.61 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-art/cjs/react-art.production.min.js	+1.21%	98.58 kB	99.78 kB	+1.01%	30.27 kB	30.57 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.min.js	+1.04%	115.12 kB	116.32 kB	+0.97%	35.10 kB	35.44 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js	+0.97%	124.14 kB	125.34 kB	+1.00%	37.34 kB	37.71 kB
oss-experimental/react-art/cjs/react-art.development.js	+0.92%	830.42 kB	838.05 kB	+0.79%	181.11 kB	182.54 kB
oss-experimental/react-art/umd/react-art.production.min.js	+0.88%	135.85 kB	137.04 kB	+0.81%	42.38 kB	42.73 kB
oss-experimental/react-art/umd/react-art.development.js	+0.84%	946.49 kB	954.47 kB	+0.71%	200.18 kB	201.59 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js	+0.82%	928.38 kB	936.01 kB	+0.72%	199.07 kB	200.49 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.69%	173.49 kB	174.69 kB	+0.65%	54.26 kB	54.61 kB
oss-experimental/react-dom/umd/react-dom.production.min.js	+0.69%	173.29 kB	174.48 kB	+0.61%	54.56 kB	54.89 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.min.js	+0.67%	179.70 kB	180.90 kB	+0.60%	56.63 kB	56.96 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js	+0.66%	183.13 kB	184.33 kB	+0.61%	56.65 kB	57.00 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js	+0.65%	182.29 kB	183.48 kB	+0.65%	56.89 kB	57.26 kB
oss-experimental/react-dom/cjs/react-dom.development.js	+0.58%	1,320.92 kB	1,328.56 kB	+0.48%	291.86 kB	293.25 kB
oss-experimental/react-dom/umd/react-dom.development.js	+0.58%	1,384.65 kB	1,392.63 kB	+0.48%	294.87 kB	296.29 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js	+0.57%	1,338.98 kB	1,346.61 kB	+0.48%	296.22 kB	297.65 kB

Generated by 🚫 dangerJS against a4a9273

The action function is async, so it should return a promise.

To implement async actions with useFormState, we need the thenable that we store in state to resolve to the return value of the thenable. Currently, the function we use for async actions (requestAsyncActionContext) always resolves to a fixed value, like false (for useTransition) or a frozen object (for useFormStatus). This is a perf trick to avoid composing an extra async function. To accommodate both requirements, I updated requestAsyncActionContext to accept an optional overrideReturnValue argument. If it's passed, then the resulting thenable will resolve to that value. Otherwise, it will result to the return value of the async action.

I want to reuse the async part of the code for useFormState, so I split this into two separate funtions.

This implements useFormState in Fiber. (It does not include any progressive enhancement features; those will be added later.) useFormState is a hook for tracking state produced by async actions. It has a signature similar to useReducer, but instead of a reducer, it accepts an async action function. async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) Calling dispatch runs the async action and updates the state to the returned value. Async actions run before React's render cycle, so unlike reducers, they can contain arbitrary side effects.

This implements useFormState in Fiber. (It does not include any progressive enhancement features; those will be added later.) useFormState is a hook for tracking state produced by async actions. It has a signature similar to useReducer, but instead of a reducer, it accepts an async action function. ```js async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) ``` Calling dispatch runs the async action and updates the state to the returned value. Async actions run before React's render cycle, so unlike reducers, they can contain arbitrary side effects. DiffTrain build for [456d153](456d153)

This implements useFormState in Fiber. (It does not include any progressive enhancement features; those will be added later.) useFormState is a hook for tracking state produced by async actions. It has a signature similar to useReducer, but instead of a reducer, it accepts an async action function. ```js async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) ``` Calling dispatch runs the async action and updates the state to the returned value. Async actions run before React's render cycle, so unlike reducers, they can contain arbitrary side effects.

This implements useFormState in Fiber. (It does not include any progressive enhancement features; those will be added later.) useFormState is a hook for tracking state produced by async actions. It has a signature similar to useReducer, but instead of a reducer, it accepts an async action function. ```js async function action(prevState, payload) { // .. } const [state, dispatch] = useFormState(action, initialState) ``` Calling dispatch runs the async action and updates the state to the returned value. Async actions run before React's render cycle, so unlike reducers, they can contain arbitrary side effects. DiffTrain build for commit 456d153.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 24, 2023

acdlite requested a review from sebmarkbage August 24, 2023 23:21

acdlite force-pushed the useformstate-fiber branch from f6bd773 to a7e1e2a Compare August 24, 2023 23:30

sebmarkbage approved these changes Aug 28, 2023

View reviewed changes

acdlite added 4 commits August 28, 2023 11:05

Fix useFormState type

2592659

The action function is async, so it should return a promise.

Split requestAsyncActionContext into sync and async

ed7275c

I want to reuse the async part of the code for useFormState, so I split this into two separate funtions.

acdlite force-pushed the useformstate-fiber branch from a7e1e2a to a4a9273 Compare August 28, 2023 15:05

acdlite merged commit 456d153 into facebook:main Aug 28, 2023
2 checks passed

acdlite mentioned this pull request Sep 14, 2023

Update React from dd480ef92 to d6dcad6a8. vercel/next.js#55399

Merged

hi-ogawa mentioned this pull request Apr 11, 2024

refactor(react-server): use official createServerReference hi-ogawa/vite-plugins#283

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Client implementation of useFormState #27278

Client implementation of useFormState #27278

acdlite commented Aug 24, 2023

react-sizebot commented Aug 24, 2023 •

edited

Loading

Client implementation of useFormState #27278

Client implementation of useFormState #27278

Conversation

acdlite commented Aug 24, 2023

react-sizebot commented Aug 24, 2023 • edited Loading

Critical size changes

Significant size changes

react-sizebot commented Aug 24, 2023 •

edited

Loading