Как получить значения полей формы в React: отдельный state для каждого поля, один объект в state или ref?

React предлагает два принципиально разных подхода к формам: контролируемые компоненты, где значение поля хранится в состоянии React, и неконтролируемые, где значение живёт в DOM, а доступ к нему получают через ref. Выбор между ними определяет, как часто компонент перерисовывается и насколько просто валидировать данные на лету.

Отдельный state для каждого поля

Самый прямолинейный способ: завести по useState на каждое поле. Подходит для форм из двух-трёх полей, но при росте формы код становится громоздким, а количество ререндеров растёт.

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input value={password} onChange={e => setPassword(e.target.value)} />
    </form>
  );
}

Один объект в state

Более масштабируемый вариант: хранить все поля в одном объекте и обновлять его через один обработчик, используя атрибут name. Это уменьшает дублирование и упрощает сброс формы.

function LoginForm() {
  const [form, setForm] = useState({ email: '', password: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form>
      <input name="email" value={form.email} onChange={handleChange} />
      <input name="password" value={form.password} onChange={handleChange} />
    </form>
  );
}

Ref для неконтролируемых полей

Если значение не нужно во время ввода, а только при отправке, можно использовать useRef. DOM сам хранит значение, React не перерисовывается на каждый символ. Это быстрее, но сложнее делать мгновенную валидацию и синхронизацию.

function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value, passwordRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} />
      <input ref={passwordRef} />
    </form>
  );
}

Итог: для форм с валидацией и реакцией на ввод выбирайте контролируемые компоненты с одним объектом state, а ref применяйте для простых форм или интеграции со сторонними библиотеками, где значение нужно только при отправке.