Reset Uncontrolled Forms by Forcing React to Rebuild the DOM.

uncontrolled.tsx

import React, { useState, createRef } from "react";

const Form = () => {
  const emailRef = createRef<HTMLInputElement>()
  return (
    <div>
      Email:
      <input type="text" ref={emailRef}/>
      <button
        onClick={() => {
          // This check is necessary because in theory we could hit this
          // code even though React is still rebuilding the DOM.
          if (emailRef.current) {
            window.alert(`Your email is "${emailRef.current.value}"`)
          }
        }}
      >
        Go
      </button>
    </div>
  );
};

export {
  Form,
}