Этап 6 из 12 · ≈ 4 ч

Формы в React

Основа с Junior

Контролируемые и неконтролируемые поля, валидация, библиотеки форм.

Контролируемое поле: значение в state, каждое нажатие проходит через React. Неконтролируемое: значение хранит DOM, читаем по ref или из FormData при отправке.

const [email, setEmail] = useState("");
<input value={email} onChange={(e) => setEmail(e.target.value)} />

Что важно знать

  • Контролируемые удобны для мгновенной валидации и зависимых полей, но большая форма перерисовывается на каждый символ.
  • React Hook Form использует неконтролируемые поля и подписки — быстро и мало кода; со схемой Zod валидация описывается один раз и даёт типы.
  • Действия форм React 19 (action, useActionState) — отправка без ручного управления состоянием загрузки.
  • Доступность: подписи, сообщения об ошибках, связанные через aria-describedby, фокус на первом ошибочном поле.

Критерии освоения

Junior ≈ 4 ч

  • Делает контролируемые и неконтролируемые формы и объясняет разницу

Практика. Сделать форму обратной связи с валидацией на контролируемых полях.

Middle ≈ 4 ч

  • Строит формы на React Hook Form со схемой Zod и доступными ошибками

Практика. Сделать форму оформления заказа на React Hook Form и Zod с зависимыми полями.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем контролируемый компонент формы отличается от неконтролируемого?Junior

Контролируемый — значение поля хранится в состоянии React (value + onChange): React — единственный источник истины, легко валидировать и форматировать на лету. Неконтролируемый — значение хранит сам DOM, читают через ref или FormData при отправке…

Полный разбор
Как сделать простую форму в React?Junior

Контролируемое поле: значение в state, value={name} и onChange={e => setName(e.target.value)} — React — источник истины, удобно валидировать и форматировать на лету. Неконтролируемое: значение живёт в DOM, читается при отправке через FormData или ref…

Полный разбор
Как строить сложные формы на React Hook Form со схемой Zod?Middle

React Hook Form держит поля неконтролируемыми (через register и ref) — мало перерисовок даже на больших формах — и даёт состояние ошибок, отправки, «грязных» полей. Zod описывает схему данных: типы, обязательность, форматы, связи полей; через zodResolver она…

Полный разбор
Как валидировать формы на фронтенде?Junior

Проверка на клиенте — для удобства (быстрая подсказка), на сервере — обязательно (клиент можно обойти). Встроенные атрибуты: required, minlength, pattern, min/max, типы email и url; в JS — Constraint Validation API или библиотека схем (Zod, Yup). Ошибки…

Полный разбор
Как работает useState?Junior

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования