Що таке "Controlled Component"?

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

Визначення

Controlled Component - це компонент, у якого значення повністю керується станом React (state).

Іншими словами: UI = функція від стану.

Ідея

У звичайному HTML <input> сам зберігає своє значення (внутрішньо, в DOM). А в React, якщо ти робиш контрольований компонент, значення цього поля зберігається в стані компонента, а не в DOM.

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

javascript

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

  return (
    <div>
      <input
        type="text"
        value={name}                 // <- значення береться зі state
        onChange={(e) => setName(e.target.value)} // <- оновлюємо state при вводі
      />
      <p>Привіт, {name || 'гість'}!</p>
    </div>
  );
}

Тут input контролюється станом name:

React зберігає значення поля у своєму state;

при кожній зміні onChange оновлює стан;

UI автоматично перемальовується з новим значенням.

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

javascript

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

  function handleSubmit() {
    alert(`Привіт, ${inputRef.current.value}`);
  }

  return (
    <div>
      <input type="text" ref={inputRef} /> {/* значення зберігається в DOM */}
      <button onClick={handleSubmit}>Надіслати</button>
    </div>
  );
}

Тут <input> неконтрольований - React не знає його значення, воно живе всередині DOM. Ми можемо прочитати його тільки через ref.

Відмінності

Критерій	Controlled	Uncontrolled
Де зберігається значення	У React `state`	Усередині DOM
Як змінюється значення	Через `onChange` і `setState`	Користувач вводить напряму
Коли оновлюється UI	При зміні `state`	React не контролює
Двостороннє зв'язування	Так	Ні
Тестованість	Висока	Низька
Використання у формах	Рекомендується	Тільки для простих випадків

Чому контрольовані компоненти важливі

React повністю керує станом -> UI завжди синхронізований.
Можна валідувати дані при кожному введенні.
Можна скидати, змінювати, автозаповнювати значення програмно.
Єдине джерело істини - значення поля = стан React.

Приклад використання у формі

javascript

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

  function handleChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(form); // використовуємо дані зі state
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={form.password}
        onChange={handleChange}
      />
      <button type="submit">Увійти</button>
    </form>
  );
}

Тут обидва <input> повністю контролюються станом form - React знає кожну зміну в реальному часі.

Підсумок

Що це	Компонент, значення якого зберігається в React state
Де зберігається стан	У React, а не в DOM
Як оновлюється	Через `onChange` -> `setState`
Приклад	`<input value={name} onChange={...} />`
Переваги	Передбачуваність, валідація, "єдине джерело істини"
Аналогія	"React тримає кермо, а не DOM"

Головна думка: Контрольований компонент - це той, у якого React керує значенням.

UI просто відображає поточний стан, а не зберігає його сам.

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

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

Premium

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