Take a second and think about a form you’ve built in React.

OK! Come back!
I’m sure that was frightening. So let’s move on quickly.

There’s an input type that I think most React developers sleep on: type="reset". It’s a godsend for quickly reseting an entire form without writing a bespoke reset function.

Of course, React has a standing recommendation that form inputs be controlled vs uncontrolled. Controlled components ensure that React remains the source of truth — not the DOM. type="reset" is incompatable with that recommendation — making React respond to the truth in the DOM. I’m not one to tell you what to think… but I do want you to know the alternatives are before implement a less reliable reset function yourself 😁

Take it home

Open this CodeSandbox. Without any intervention on our part, the Reset button resets the entire form. Too good to be true? Add more inputs and see for yourself.

Looking for a challenge? Take it a step further and reset the form after Submit.