ReactDOM.requestFormReset

[acdlite]

Based on:

• Scaffolding for requestFormReset API #28808
• Automatically reset forms after action finishes #28804

---

This adds a React DOM method called requestFormReset that schedules a form reset to occur when the current transition completes.

Internally, it's the same method that's called automatically whenever a form action is submitted. It only affects uncontrolled form inputs. See #28804 for details.

The reason for the public API is so UI libraries can implement their own action-based APIs and maintain the form-resetting behavior, something like this:

function onSubmit(event) {
  // Disable default form submission behavior
  event.preventDefault();
  const form = event.target;
  startTransition(async () => {
    // Request the form to reset once the action
    // has completed
    requestFormReset(form);

    // Call the user-provided action prop
    await action(new FormData(form));
  })
}

[react-sizebot]

Comparing: 374b5d2...55fec73

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	+0.02%	168.73 kB	168.76 kB	+0.03%	52.89 kB	52.91 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.02%	170.53 kB	170.57 kB	+0.03%	53.43 kB	53.44 kB
facebook-www/ReactDOM-prod.classic.js	+0.04%	590.15 kB	590.38 kB	+0.06%	103.77 kB	103.83 kB
facebook-www/ReactDOM-prod.modern.js	+0.04%	565.96 kB	566.20 kB	+0.05%	99.97 kB	100.02 kB
test_utils/ReactAllWarnings.js	Deleted	64.44 kB	0.00 kB	Deleted	16.10 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	64.44 kB	0.00 kB	Deleted	16.10 kB	0.00 kB

Generated by 🚫 dangerJS against 55fec73

[devongovett]

Could there be a more general API to run some code after the transition completes? Sometimes we might need to perform some custom logic beyond the native form reset. Seems like some sort of callback could work?

startTransition(async () => {
  runAfterTransition(() => {
    form.reset();
    // whatever custom logic here.
  });

  await action();
});