Контрольовані та неконтрольовані компоненти в React

У React, працюючи з формами, існує два підходи до управління значеннями полів: контрольовані та неконтрольовані компоненти.

Контрольований компонент

Це компонент, де значення форми зберігається в state компонент React, а будь-яка зміна введення користувача відбувається через onChange та оновлення стану.

Приклад:

jsx

import { useState } from "react";

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

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Тут:

value управляється через стан React
React знає актуальне значення в будь-який момент
Можна валідувати/оновлювати дані на льоту

Неконтрольований компонент

Це компонент, де значення не зберігається в стані React, а витягується безпосередньо з DOM за допомогою ref.

Приклад

jsx

import { useRef } from "react";

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

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

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

Тут:

React не знає, яке значення має input прямо зараз
Значення отримується лише за потреби
Легко реалізувати, особливо якщо потрібно отримати доступ до значення один раз

Таблиця порівняння

****	Контрольований компонент	Неконтрольований компонент
Де зберігається значення	У стані React	У DOM через ref
React "знає" значення?	Так	Ні
Підходить для валідації	Відмінно підходить	Складніше реалізувати
Продуктивність	Може перерендити частіше	Швидше для великих форм
Простота реалізації	Трохи складніше	Простішим у простих сценаріях

Коли використовувати?

Контрольований:

Якщо потрібно валідувати введення в реальному часі
Для складних форм
Коли важливий повний контроль

Неконтрольований:

Простих формах або полях
Коли значення потрібне лише при відправці
Інтеграція з бібліотеками сторонніх розробників

Порада:

Використовуйте контрольовані компоненти, коли потрібно контролювати стан та проводити валідацію. Для простих форм або інтеграції з formData неконтрольовані компоненти є кращим вибором.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Контрольовані та неконтрольовані компоненти в React

#Контрольований компонент

#Приклад:

#Неконтрольований компонент

#Приклад

#Таблиця порівняння

#Коли використовувати?