Event Handeling in react hooks

Question

I am trying to make a form using ReactJS. What I am confused about is how the useState hook handles the change event if I use google autofill to fill all the input fields simultaneously? Here in the App component I am using useState to have a contact object that store fName, lName and email. The same update function is used as listener for all the three input fields change event.

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: "",
  });

  function update(events) {
    const { name, value } = events.target;

    setContact((prevValue) => {
      if (name === "fName") {
        return { fName: value, lName: prevValue.lName, email: prevValue.email};
      }
      if (name === "lName") {
        return { fName: prevValue.fName, lName: value, email: prevValue.email };
      }
      if (name === "email") {
        return { fName: prevValue.fName, lName: prevValue.lName, email: value };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>
      <form>
        <input
          onChange={update}
          value={contact.fName}
          name="fName"
          placeholder="First Name"
        />
        <input
          onChange={update}
          value={contact.lName}
          name="lName"
          placeholder="Last Name"
        />
        <input
          onChange={update}
          value={contact.email}
          name="email"
          placeholder="Email"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

The code works perfectly on brave and chrome while i expected it to crash because of my conditionals.

Answer 1

Your update function doesn't crash when using Google Autofill because each input field's onChange event is triggered individually. Even though Autofill fills multiple fields simultaneously, the browser simulates a change event for each field, ensuring that your update function is called once for each field. React handles state updates in batches, meaning each event is processed individually without interfering with other updates. This ensures that your state is updated correctly for each field, even when Autofill is used. Here's a simplified explanation of how this works:

Individual Change Events: When Google Autofill fills multiple fields, it triggers a change event for each field. This means your update function is called once for each field.

React State Updates: React processes these updates individually. Even if multiple fields are filled at once, React will queue these updates and apply them one by one.

However, there is a small issue in your update function. You are adding prevValue.lName in email field of state when updating fName and lName.

You can also simplify your update function by using spread operator like this:

function update(events) {
  const { name, value } = events.target;
  setContact((prevValue) => ({ ...prevValue, [name]: value }));
}

Let me know if any other queries or confusions :)