A World without Refs

Consider the following example: you have a website that renders an input field, requesting a user's email address. It could look something like this:

Figure 7.1: An example form with an email input field

The code for the component that's responsible for rendering the form and handling the entered email address value might look like this:

function EmailForm() {
  const [enteredEmail, setEnteredEmail] = useState('');
  function updateEmailHandler(event) {
  setEnteredEmail(event.target.value);
  }
  function submitFormHandler(event) {
  event.preventDefault();
  // could send enteredEmail to a backend server
  }
  return (
  <form className={classes.form} onSubmit={submitFormHandler}>
    <label htmlFor="email">Your email</label>
    <input type=&quot...