Контролируемые компоненты

▸Определение

Контролируемые компоненты — инпуты, значение которых управляется через state React. При каждом keystroke обновляется состояние и ре-рендерится инпут.

▸Пример

tsx

1function ControlledInput() {
2  const [value, setValue] = useState('');
3
4  return (
5    <input
6      type="text"
7      value={value}
8      onChange={(e) => setValue(e.target.value)}
9    />
10  );
11}

▸Преимущества

Полный контроль над значением

Легкая валидация и форматирование

Единый источник истины

Простая интеграция с state management

▸Недостатки

Ре-рендер при каждом keystroke

Больше кода для простых форм

Неконтролируемые компоненты

▸Определение

Неконтролируемые компоненты хранят значение в DOM, а не в state React. Используют ref для доступа к значению.

▸Пример

tsx

1function UncontrolledInput() {
2  const inputRef = useRef(null);
3
4  const handleSubmit = () => {
5    console.log(inputRef.current.value);
6  };
7
8  return (
9    <input type="text" ref={inputRef} />
10  );
11}

▸Преимущества

Меньше кода

Не вызывает ре-рендеры

Быстрее для простых форм

▸Недостатки

Нет доступа к значению во время ввода

Сложнее валидация

Труднее интегрировать с state

Сравнение подходов

▸Когда использовать контролируемые

Нужна мгновенная валидация

Форматирование ввода (маски, автодополнение)

Зависимость полей друг от друга

Сложная бизнес-логика формы

▸Когда использовать неконтролируемые

Простые формы (поиск, один инпут)

Интеграция с не-React кодом

Производительность критична

Временная форма

React Hook Form

▸Установка

bash

1npm install react-hook-form

▸Базовое использование

tsx

1import { useForm } from 'react-hook-form';
2
3function SignupForm() {
4  const { register, handleSubmit, formState: { errors } } = useForm();
5
6  const onSubmit = (data) => console.log(data);
7
8  return (
9    <form onSubmit={handleSubmit(onSubmit)}>
10      <input {...register('email', { required: true })} />
11      {errors.email && <span>Обязательное поле</span>}
12
13      <input {...register('password', { minLength: 6 })} />
14      {errors.password && <span>Минимум 6 символов</span>}
15
16      <button type="submit">Зарегистрироваться</button>
17    </form>
18  );
19}

▸Валидация

tsx

1const { register } = useForm({
2  mode: 'onChange', // валидация при каждом изменении
3});
4
5<input
6  {...register('email', {
7    required: 'Email обязателен',
8    pattern: {
9      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
10      message: 'Некорректный email',
11    },
12  })}
13/>

▸Controller для сложных компонентов

tsx

1import { Controller } from 'react-hook-form';
2
3<Controller
4  name="country"
5  control={control}
6  render={({ field }) => (
7    <Select {...field} options={countries} />
8  )}
9/>

Formik

▸Установка

bash

1npm install formik

▸Базовое использование

tsx

1import { Formik, Form, Field, ErrorMessage } from 'formik';
2import * as Yup from 'yup';
3
4const SignupSchema = Yup.object().shape({
5  email: Yup.string().email('Некорректный email').required('Обязательно'),
6  password: Yup.string().min(6, 'Минимум 6 символов').required('Обязательно'),
7});
8
9function SignupForm() {
10  return (
11    <Formik
12      initialValues={{ email: '', password: '' }}
13      validationSchema={SignupSchema}
14      onSubmit={(values) => console.log(values)}
15    >
16      {({ isSubmitting }) => (
17        <Form>
18          <Field type="email" name="email" />
19          <ErrorMessage name="email" component="div" />
20
21          <Field type="password" name="password" />
22          <ErrorMessage name="password" component="div" />
23
24          <button type="submit" disabled={isSubmitting}>
25            Отправить
26          </button>
27        </Form>
28      )}
29    </Formik>
30  );
31}

React Hook Form vs Formik

▸Производительность

React Hook Form использует uncontrolled подход с ref, что делает его быстрее. Formik контролирует каждое поле через state.

▸Bundle size

React Hook Form: ~9 KB. Formik: ~44 KB. Значительная разница.

▸TypeScript

React Hook Form имеет лучшую поддержку TypeScript. Formik требует больше boilerplate.

Валидация

▸Yup

tsx

1const schema = Yup.object().shape({
2  name: Yup.string().required(),
3  age: Yup.number().min(18).required(),
4});

▸Zod

tsx

1import { z } from 'zod';
2
3const schema = z.object({
4  name: z.string().min(1),
5  age: z.number().min(18),
6});
7
8// Интеграция с React Hook Form
9const { register } = useForm({
10  resolver: zodResolver(schema),
11});

Best Practices

▸Не используйте formik для новых проектов

React Hook Form — современный выбор. Formik устаревает.

▸Валидируйте на клиенте и сервере

Клиентская валидация — UX, серверная — безопасность.

▸Показывайте ошибки рядом с полями

Не группируйте ошибки в одном месте. Пользователь должен видеть ошибку возле проблемного поля.

Заключение

Контролируемые компоненты — стандарт React. Для сложных форм используйте React Hook Form или Formik. React Hook Form — предпочтительный выбор в 2024 году благодаря производительности и TypeScript-поддержке.

#react#forms#react-hook-form#formik#валидация

React≈ 13 мин чтения10 мая 2024 г.

Формы в React: Controller vs Uncontrolled

Два подхода к управлению формами в React: контролируемые и неконтролируемые компоненты, React Hook Form и Formik.

Контролируемые компоненты

▸Определение

▸Пример

tsx

1function ControlledInput() {
2  const [value, setValue] = useState('');
3
4  return (
5    <input
6      type="text"
7      value={value}
8      onChange={(e) => setValue(e.target.value)}
9    />
10  );
11}

▸Преимущества

Полный контроль над значением

Легкая валидация и форматирование

Единый источник истины

Простая интеграция с state management

▸Недостатки

Ре-рендер при каждом keystroke

Больше кода для простых форм

Неконтролируемые компоненты

▸Определение

Неконтролируемые компоненты хранят значение в DOM, а не в state React. Используют ref для доступа к значению.

▸Пример

tsx

1function UncontrolledInput() {
2  const inputRef = useRef(null);
3
4  const handleSubmit = () => {
5    console.log(inputRef.current.value);
6  };
7
8  return (
9    <input type="text" ref={inputRef} />
10  );
11}

▸Преимущества

Меньше кода

Не вызывает ре-рендеры

Быстрее для простых форм

▸Недостатки

Нет доступа к значению во время ввода

Сложнее валидация

Труднее интегрировать с state

Сравнение подходов

▸Когда использовать контролируемые

Нужна мгновенная валидация

Форматирование ввода (маски, автодополнение)

Зависимость полей друг от друга

Сложная бизнес-логика формы

▸Когда использовать неконтролируемые

Простые формы (поиск, один инпут)

Интеграция с не-React кодом

Производительность критична

Временная форма

React Hook Form

▸Установка

bash

1npm install react-hook-form

▸Базовое использование

tsx

1import { useForm } from 'react-hook-form';
2
3function SignupForm() {
4  const { register, handleSubmit, formState: { errors } } = useForm();
5
6  const onSubmit = (data) => console.log(data);
7
8  return (
9    <form onSubmit={handleSubmit(onSubmit)}>
10      <input {...register('email', { required: true })} />
11      {errors.email && <span>Обязательное поле</span>}
12
13      <input {...register('password', { minLength: 6 })} />
14      {errors.password && <span>Минимум 6 символов</span>}
15
16      <button type="submit">Зарегистрироваться</button>
17    </form>
18  );
19}

▸Валидация

tsx

1const { register } = useForm({
2  mode: 'onChange', // валидация при каждом изменении
3});
4
5<input
6  {...register('email', {
7    required: 'Email обязателен',
8    pattern: {
9      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
10      message: 'Некорректный email',
11    },
12  })}
13/>

▸Controller для сложных компонентов

tsx

1import { Controller } from 'react-hook-form';
2
3<Controller
4  name="country"
5  control={control}
6  render={({ field }) => (
7    <Select {...field} options={countries} />
8  )}
9/>

Formik

▸Установка

bash

1npm install formik

▸Базовое использование

tsx

1import { Formik, Form, Field, ErrorMessage } from 'formik';
2import * as Yup from 'yup';
3
4const SignupSchema = Yup.object().shape({
5  email: Yup.string().email('Некорректный email').required('Обязательно'),
6  password: Yup.string().min(6, 'Минимум 6 символов').required('Обязательно'),
7});
8
9function SignupForm() {
10  return (
11    <Formik
12      initialValues={{ email: '', password: '' }}
13      validationSchema={SignupSchema}
14      onSubmit={(values) => console.log(values)}
15    >
16      {({ isSubmitting }) => (
17        <Form>
18          <Field type="email" name="email" />
19          <ErrorMessage name="email" component="div" />
20
21          <Field type="password" name="password" />
22          <ErrorMessage name="password" component="div" />
23
24          <button type="submit" disabled={isSubmitting}>
25            Отправить
26          </button>
27        </Form>
28      )}
29    </Formik>
30  );
31}

React Hook Form vs Formik

▸Производительность

React Hook Form использует uncontrolled подход с ref, что делает его быстрее. Formik контролирует каждое поле через state.

▸Bundle size

React Hook Form: ~9 KB. Formik: ~44 KB. Значительная разница.

▸TypeScript

React Hook Form имеет лучшую поддержку TypeScript. Formik требует больше boilerplate.

Валидация

▸Yup

tsx

1const schema = Yup.object().shape({
2  name: Yup.string().required(),
3  age: Yup.number().min(18).required(),
4});

▸Zod

tsx

1import { z } from 'zod';
2
3const schema = z.object({
4  name: z.string().min(1),
5  age: z.number().min(18),
6});
7
8// Интеграция с React Hook Form
9const { register } = useForm({
10  resolver: zodResolver(schema),
11});

Best Practices

▸Не используйте formik для новых проектов

React Hook Form — современный выбор. Formik устаревает.

▸Валидируйте на клиенте и сервере

Клиентская валидация — UX, серверная — безопасность.

▸Показывайте ошибки рядом с полями

Не группируйте ошибки в одном месте. Пользователь должен видеть ошибку возле проблемного поля.

Заключение

#react#forms#react-hook-form#formik#валидация

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Контролируемые компоненты

▸Определение

▸Пример

▸Преимущества

▸Недостатки

Неконтролируемые компоненты

▸Определение

▸Пример

▸Преимущества

▸Недостатки

Сравнение подходов

▸Когда использовать контролируемые

▸Когда использовать неконтролируемые

React Hook Form

▸Установка

▸Базовое использование

▸Валидация

▸Controller для сложных компонентов

Formik

▸Установка

▸Базовое использование

React Hook Form vs Formik

▸Производительность

▸Bundle size

▸TypeScript

Валидация

▸Yup

▸Zod

Best Practices

▸Не используйте formik для новых проектов

▸Валидируйте на клиенте и сервере

▸Показывайте ошибки рядом с полями

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Контролируемые компоненты

▸Определение

▸Пример

▸Преимущества

▸Недостатки

Неконтролируемые компоненты

▸Определение

▸Пример

▸Преимущества

▸Недостатки

Сравнение подходов

▸Когда использовать контролируемые

▸Когда использовать неконтролируемые

React Hook Form

▸Установка

▸Базовое использование

▸Валидация

▸Controller для сложных компонентов

Formik

▸Установка

▸Базовое использование

React Hook Form vs Formik

▸Производительность

▸Bundle size

▸TypeScript

Валидация

▸Yup

▸Zod

Best Practices

▸Не используйте formik для новых проектов

▸Валидируйте на клиенте и сервере

▸Показывайте ошибки рядом с полями

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня