Фарқи байни воридоти назоратшаванда ва ғайриназоратшаванда чист ва кай бояд истифода бурда шавад?

Контроллашти ввхід — це елемент форми, значення якого повністю контролюється станом компонента (наприклад, у React). Значення поля зберігається у стані і оновлюється через обробник подій.

Неконтрольований ввхід — це елемент форми, який керується самим DOM, а не станом компонента. Значення зчитується через посилання, коли потрібно.

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

• Контрольований ввхід зручний, коли потрібно миттєво реагувати на зміни, валідовувати дані, синхронізувати з станом додатку.
• Неконтрольований ввхід простіше і швидше для простих форм, де не потрібно постійне контролювання введення.

Приклад контрольованого вводу у React:

function MyInput() {
  const [value, setValue] = React.useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Приклад неконтрольованого вводу:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Надіслати</button>
  </>;
}