Fix: Skip hidden inputs before text instance #27358

acdlite · 2023-09-11T19:20:09Z

Found a hydration bug that happens when you pass a Server Action to formAction and the next node is a text instance.

The HTML generated by Fizz is something like this:

<button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST">
  <input type="hidden" name="$ACTION_5:0" value="..."/>
  <input type="hidden" name="$ACTION_5:1" value="..."/>
  <input type="hidden" name="$ACTION_KEY" value="..."/>Count: <!-- -->0
</button>

Fiber is supposed to skip over the extra hidden inputs, but it doesn't handle this correctly if the next expected node isn't a host instance. In this case, it's a text instance.

Not sure if the proper fix is to change the HTML that is generated, or to change the hydration logic, but in this PR I've done the latter.

Found a hydration bug that happens when you pass a Server Action to `formAction` and the next node is a text instance. The HTML generated by Fizz is something like this: <button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST"> <input type="hidden" name="$ACTION_5:0" value="..."/> <input type="hidden" name="$ACTION_5:1" value="..."/> <input type="hidden" name="$ACTION_KEY" value="..."/>Count: 0 </button> Fiber is supposed to skip over the extra hidden inputs, but it doesn't handle this correctly if the next expected node isn't a host instance. In this case, it's a text instance. Not sure if the proper fix is to change the HTML that is generated, or to change the hydration logic, but in this commit I've done the latter.

react-sizebot · 2023-09-11T19:24:06Z

Comparing: 627b7ab...4a0ca0f

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.63 kB	165.63 kB	=	51.88 kB	51.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.03%	174.82 kB	174.88 kB	+0.02%	54.69 kB	54.70 kB
facebook-www/ReactDOM-prod.classic.js	=	570.44 kB	570.44 kB	=	100.45 kB	100.45 kB
facebook-www/ReactDOM-prod.modern.js	=	554.21 kB	554.21 kB	=	97.61 kB	97.61 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 4a0ca0f

Found a hydration bug that happens when you pass a Server Action to `formAction` and the next node is a text instance. The HTML generated by Fizz is something like this: ```html <button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST"> <input type="hidden" name="$ACTION_5:0" value="..."/> <input type="hidden" name="$ACTION_5:1" value="..."/> <input type="hidden" name="$ACTION_KEY" value="..."/>Count: 0 </button> ``` Fiber is supposed to skip over the extra hidden inputs, but it doesn't handle this correctly if the next expected node isn't a host instance. In this case, it's a text instance. Not sure if the proper fix is to change the HTML that is generated, or to change the hydration logic, but in this PR I've done the latter.

Found a hydration bug that happens when you pass a Server Action to `formAction` and the next node is a text instance. The HTML generated by Fizz is something like this: ```html <button name="$ACTION_REF_5" formAction="" formEncType="multipart/form-data" formMethod="POST"> <input type="hidden" name="$ACTION_5:0" value="..."/> <input type="hidden" name="$ACTION_5:1" value="..."/> <input type="hidden" name="$ACTION_KEY" value="..."/>Count: 0 </button> ``` Fiber is supposed to skip over the extra hidden inputs, but it doesn't handle this correctly if the next expected node isn't a host instance. In this case, it's a text instance. Not sure if the proper fix is to change the HTML that is generated, or to change the hydration logic, but in this PR I've done the latter. DiffTrain build for commit a4aceaf.

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

acdlite requested a review from sebmarkbage September 11, 2023 19:20

sebmarkbage approved these changes Sep 11, 2023

View reviewed changes

acdlite merged commit a4aceaf into facebook:main Sep 11, 2023

acdlite mentioned this pull request Sep 14, 2023

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Skip hidden inputs before text instance #27358

Fix: Skip hidden inputs before text instance #27358

acdlite commented Sep 11, 2023

react-sizebot commented Sep 11, 2023

Fix: Skip hidden inputs before text instance #27358

Fix: Skip hidden inputs before text instance #27358

Conversation

acdlite commented Sep 11, 2023

react-sizebot commented Sep 11, 2023

Critical size changes

Significant size changes