PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Если сохранить input в useRef, будет ли он считаться контролируемым?

Хуки

Нет — наоборот: input, значение которого читается через useRef, это классический неуправляемый (uncontrolled) компонент. Управляемость определяется не наличием ref, а тем, кто владеет значением.

Критерий управляемости

  • Управляемый: значение живёт в state, поле получает его через value и меняет через onChange → setState. React — единственный источник правды.
  • Неуправляемый: значение живёт в DOM; React его не контролирует, а лишь читает при необходимости — как раз через ref.
// НЕуправляемый (с useRef):
const inputRef = useRef(null);
<input ref={inputRef} defaultValue="" />
// читаем когда нужно: inputRef.current.value

// Управляемый (со state):
const [text, setText] = useState('');
<input value={text} onChange={(e) => setText(e.target.value)} />

В первом случае пользователь печатает — React не в курсе: ни onChange-цикла, ни ререндеров; значение доступно только императивным чтением.

Почему возникает путаница

Ref «привязывает» React к DOM-узлу, и кажется, что это контроль. Но контроль в терминологии React — управление значением через рендер (value из state). Ref — просто ссылка для императивного доступа.

Смешанные случаи

  • ref у управляемого инпута (для фокуса) — легально: управляемость не теряется, значением всё ещё владеет state.
  • React Hook Form регистрирует поля через ref — его поля неуправляемые (потому он и быстрый), хотя «контроль» над формой полный.

Коротко для собеседования

Input с useRef — неуправляемый: значением владеет DOM, React читает его по требованию (defaultValue + ref). Управляемым поле делает только пара value+onChange со state. Сам по себе ref (например, для фокуса) управляемость не меняет.

Другие вопросы раздела