Форма реакции зависает при изменении ввода

#reactjs

Вопрос:

У меня есть следующая форма в ReactJS

   <input
    placeholder="Enter Phone Number"
    name="phone"
    type="tel"
    value={phone}
    required
    className={`${classes.formField} ${classes.eightyPercent}`}
  />
  <label for="password" className={classes.formLabel}>
    Password*
  </label>
  <input
    placeholder="Enter Password"
    name="password"
    type="password"
    required
    value={password}
    className={`${classes.formField} ${classes.eightyPercent}`}
  />
 

Всякий раз, когда я включаю onChange в поле номер телефона следующим образом. В тот момент, когда я начинаю вводить в поле номер телефона или пароль, пользовательский интерфейс зависает

   <input
    placeholder="Enter Phone Number"
    name="phone"
    type="tel"
    value={phone}
    required
    onChange={(evt) => {
      setPhone(evt.target.value); //This freezes the UI
    }}
    className={`${classes.formField} ${classes.eightyPercent}`}
  />
 

Как я могу решить эту проблему?

Комментарии:

1. Здесь недостаточно, чтобы воспроизвести вашу проблему — покажите код для остальной части компонента. Если пользовательский интерфейс «зависает», то вы, вероятно, запускаете бесконечный цикл.