useFormState's permalink option changes form target #27302

acdlite · 2023-08-28T23:11:10Z

When the permalink option is passed to useFormState, and the form is submitted before it has hydrated, the permalink will be used as the target of the form action, enabling MPA-style form submissions.

(Note that submitting a form without hydration is a feature of Server Actions; it doesn't work with regular client actions.)

It does not have any effect after the form has hydrated.

Communicates the intent a bit better

When the `permalink` option is passed to `useFormState`, and the form is submitted before it has hydrated, the permalink will be used as the target of the form action, enabling MPA-style form submissions. (Note that submitting a form without hydration is a feature of Server Actions; it doesn't work with regular client actions.) It does not have any effect after the form has hydrated.

react-sizebot · 2023-08-28T23:15:10Z

Comparing: 456d153...3216b92

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	=	174.69 kB	174.69 kB	=	54.61 kB	54.61 kB
facebook-www/ReactDOM-prod.classic.js	=	570.39 kB	570.39 kB	=	100.44 kB	100.44 kB
facebook-www/ReactDOM-prod.modern.js	=	554.19 kB	554.19 kB	=	97.61 kB	97.61 kB
oss-experimental/react-server/cjs/react-server.development.js	+2.45%	150.72 kB	154.42 kB	+3.35%	37.46 kB	38.71 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-server/cjs/react-server.development.js	+2.45%	150.72 kB	154.42 kB	+3.35%	37.46 kB	38.71 kB
oss-experimental/react-server/cjs/react-server.production.min.js	+0.36%	26.27 kB	26.36 kB	+0.62%	8.91 kB	8.96 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js	+0.21%	64.82 kB	64.95 kB	+0.27%	19.57 kB	19.62 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js	+0.20%	65.10 kB	65.23 kB	+0.27%	20.19 kB	20.25 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.production.min.js	+0.20%	65.43 kB	65.56 kB	+0.26%	20.32 kB	20.38 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js	+0.20%	351.36 kB	352.07 kB	+0.32%	77.63 kB	77.88 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js	+0.20%	65.90 kB	66.03 kB	+0.34%	20.31 kB	20.38 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js	+0.20%	64.98 kB	65.11 kB	+0.30%	19.95 kB	20.01 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js	+0.20%	355.88 kB	356.59 kB	+0.30%	79.83 kB	80.07 kB

Generated by 🚫 dangerJS against 3216b92

sebmarkbage · 2023-08-29T14:22:07Z

packages/react-server/src/ReactFizzHooks.js

+      // $FlowIgnore[prop-missing]
+      const metadata: ReactCustomFormAction = boundAction.$$FORM_ACTION(prefix);
+      // Override the target URL
+      if (typeof permalink === 'string') {


Should this be !== undefined and coerced? Because generally we allow toString/valueOf.

When the `permalink` option is passed to `useFormState`, and the form is submitted before it has hydrated, the permalink will be used as the target of the form action, enabling MPA-style form submissions. (Note that submitting a form without hydration is a feature of Server Actions; it doesn't work with regular client actions.) It does not have any effect after the form has hydrated. DiffTrain build for [ddff504](ddff504)

sebmarkbage · 2023-08-30T00:51:57Z

packages/react-server/src/ReactFizzHooks.js

+        if (__DEV__) {
+          checkAttributeStringCoercion(permalink, 'target');
+        }
+        metadata.target = permalink + '';


This should be action not target.

I mixed these attributes up in #27302

I mixed these attributes up in #27302 DiffTrain build for [2fba484](2fba484)

I mixed these attributes up in facebook/react#27302 DiffTrain build for [2fba484cd095ea79b940364cea5107fa4ca9f0c8](facebook/react@2fba484)

When the `permalink` option is passed to `useFormState`, and the form is submitted before it has hydrated, the permalink will be used as the target of the form action, enabling MPA-style form submissions. (Note that submitting a form without hydration is a feature of Server Actions; it doesn't work with regular client actions.) It does not have any effect after the form has hydrated.

I mixed these attributes up in facebook#27302

When the `permalink` option is passed to `useFormState`, and the form is submitted before it has hydrated, the permalink will be used as the target of the form action, enabling MPA-style form submissions. (Note that submitting a form without hydration is a feature of Server Actions; it doesn't work with regular client actions.) It does not have any effect after the form has hydrated. DiffTrain build for commit ddff504.

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

acdlite added 2 commits August 28, 2023 19:14

Rename useFormState url arg to permalink

3319e8b

Communicates the intent a bit better

acdlite force-pushed the useformstate-permalink branch from 51587ba to c538193 Compare August 28, 2023 23:14

acdlite requested a review from sebmarkbage August 28, 2023 23:20

sebmarkbage reviewed Aug 29, 2023

View reviewed changes

sebmarkbage approved these changes Aug 29, 2023

View reviewed changes

Coerce permalink to string

3216b92

acdlite merged commit ddff504 into facebook:main Aug 29, 2023
35 of 36 checks passed

sebmarkbage reviewed Aug 30, 2023

View reviewed changes

acdlite mentioned this pull request Aug 30, 2023

useFormState fix: action -> target #27309

Merged

acdlite added a commit that referenced this pull request Aug 30, 2023

useFormState fix: action -> target (#27309)

2fba484

I mixed these attributes up in #27302

github-actions bot pushed a commit that referenced this pull request Aug 30, 2023

useFormState fix: action -> target (#27309)

469fd47

I mixed these attributes up in #27302 DiffTrain build for [2fba484](2fba484)

acdlite mentioned this pull request Sep 14, 2023

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

Merged

jerrydev0927 added a commit to jerrydev0927/react that referenced this pull request Jan 5, 2024

useFormState fix: action -> target (#27309)

f291455

I mixed these attributes up in facebook/react#27302 DiffTrain build for [2fba484cd095ea79b940364cea5107fa4ca9f0c8](facebook/react@2fba484)

EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024

useFormState fix: action -> target (facebook#27309)

e5ca798

I mixed these attributes up in facebook#27302

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useFormState's permalink option changes form target #27302

useFormState's permalink option changes form target #27302

acdlite commented Aug 28, 2023 •

edited

Loading

react-sizebot commented Aug 28, 2023 •

edited

Loading

sebmarkbage Aug 29, 2023

sebmarkbage Aug 30, 2023

acdlite Aug 30, 2023

useFormState's permalink option changes form target #27302

useFormState's permalink option changes form target #27302

Conversation

acdlite commented Aug 28, 2023 • edited Loading

react-sizebot commented Aug 28, 2023 • edited Loading

Critical size changes

Significant size changes

sebmarkbage Aug 29, 2023

Choose a reason for hiding this comment

sebmarkbage Aug 30, 2023

Choose a reason for hiding this comment

acdlite Aug 30, 2023

Choose a reason for hiding this comment

acdlite commented Aug 28, 2023 •

edited

Loading

react-sizebot commented Aug 28, 2023 •

edited

Loading