Какая разница между управляемыми и неуправляемыми компонентами?

Основное различие

Управляемые (controlled) и неуправляемые (uncontrolled) компоненты — это два подхода к работе с формами в React. В управляемых компонентах состояние поля ввода хранится в React-компоненте через useState, и каждое изменение обновляет это состояние через обработчик onChange. В неуправляемых компонентах состояние хранится в самом DOM, и для доступа к значению используется useRef.

Пример управляемого компонента

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => setValue(e.target.value);

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}

Пример неуправляемого компонента

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Когда что использовать

• Управляемые компоненты: когда нужен мгновенный контроль над вводом (валидация, маски, динамические изменения).
• Неуправляемые компоненты: для простых форм без сложной логики, где не нужно отслеживать каждое изменение.

Вывод: управляемые компоненты предпочтительнее в большинстве случаев, так как они делают состояние предсказуемым и упрощают тестирование. Неуправляемые компоненты могут быть полезны для интеграции с не-React кодом или для очень простых полей.