Чим відрізняється "Uncontrolled Component"?

ReactMiddle~2 хв читання

Визначення

Uncontrolled Component (неконтрольований компонент) - це компонент, який зберігає свій стан (наприклад, значення поля вводу) всередині DOM, а не в стані React (useState).

React при цьому не керує його значенням напряму - він просто читає його за потреби (через ref або при сабміті форми).

Приклад неконтрольованого компонента

javascript

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

  function handleSubmit(e) {
    e.preventDefault();
    console.log({
      email: emailRef.current.value,
      password: passwordRef.current.value,
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" placeholder="Email" />
      <input ref={passwordRef} type="password" placeholder="Password" />
      <button type="submit">Log in</button>
    </form>
  );
}

Тут:

<input> сам зберігає своє значення (всередині DOM);

React не знає, що вводить користувач;

при сабміті ми дістаємо значення з DOM через ref.

Відмінність від контрольованого компонента

Controlled Component

javascript

function Controlled() {
  const [name, setName] = useState('');

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)} // React керує значенням
    />
  );
}

React = "єдине джерело істини" (Single Source of Truth).

Uncontrolled Component

javascript

function Uncontrolled() {
  const inputRef = useRef();

  return (
    <input ref={inputRef} /> // значення зберігається в DOM
  );
}

DOM = джерело істини, React просто спостерігає.

Ключові відмінності

Критерій	Controlled	Uncontrolled
Де зберігається значення	У React state	Всередині DOM
Як оновлюється	Через `onChange` -> `setState`	Користувач вводить напряму
React знає поточне значення?	Так	Ні (поки не запитаємо через `ref`)
Управління даними	Повністю під контролем React	React "запитує" DOM за потреби
Валідація / маски / автозаповнення	Можна в реальному часі	Тільки при сабміті
Зручність при складних формах	Висока	Обмежена
Продуктивність	Трохи нижча (часті рендери)	Трохи вища (React не стежить за кожною зміною)

Коли використовувати Uncontrolled Components

Підходять для простих, ізольованих форм, де не потрібна миттєва реакція на ввід. Наприклад:

форма підписки з одним полем і кнопкою;
рядок пошуку, де значення читається тільки при сабміті;
інтеграція зі сторонніми бібліотеками, які самі керують DOM (input[type=file], сторонні віджети тощо).

Приклад реального використання (input type="file")

javascript

function FileUploader() {
  const fileRef = useRef();

  function handleUpload() {
    const file = fileRef.current.files[0];
    console.log(file.name);
  }

  return (
    <div>
      <input type="file" ref={fileRef} /> {/* React не керує */}
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

<input type="file" /> завжди неконтрольований, тому що React не має доступу до файлових даних напряму. Тут DOM керує значенням.

Іноді можна змішувати

Іноді зручний гібридний підхід:

при монтуванні задати початкове значення;
далі не керувати ним через state.

javascript

<input defaultValue="Hello" />  // Неконтрольований з початковими даними

Атрибут defaultValue (або defaultChecked) задає стартове значення, але після цього React не стежить за змінами.

Підсумок

Властивість	Controlled Component	Uncontrolled Component
Джерело істини	React state	DOM
Управління вводом	React контролює	Браузер контролює
Читання значення	Через `state`	Через `ref`
Реакція на зміни	В реальному часі	Тільки за подією
Застосування	Складні форми, валідація, динаміка	Прості форми, інтеграції, `<input type="file">`
Атрибути	`value`, `onChange`	`defaultValue`, `ref`

Головна думка: Контрольований компонент - React "тримає кермо" Неконтрольований - "браузер сам керує", а React тільки спостерігає

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.