Что такое controlled и uncontrolled компоненты в React?

Controlled vs Uncontrolled Components

Controlled Components

React контролирует значение через state:

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

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

Характеристики:

• Значение хранится в React state
• Каждое изменение — через onChange
• React — "source of truth"

Uncontrolled Components

DOM сам хранит значение:

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

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

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

Характеристики:

• Значение в DOM
• Доступ через ref
• defaultValue вместо value

Сравнение:

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

Controlled:

• Валидация в реальном времени
• Условное отключение submit
• Форматирование ввода
• Несколько входов зависят друг от друга

Uncontrolled:

• Простые формы
• Интеграция с non-React кодом
• Файловый input (всегда uncontrolled)

Файловый input:

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

    return (
        <input
            type="file"
            ref={fileRef}
            // value нельзя установить программно
        />
    );
}

React Hook Form (гибридный подход):

import { useForm } from 'react-hook-form';

function Form() {
    const { register, handleSubmit } = useForm();

    return (
        <form onSubmit={handleSubmit(data => console.log(data))}>
            <input {...register('name')} />
            <button type="submit">Submit</button>
        </form>
    );
}