Использовали ли Formik

Опыт с Formik

Да, я использовал Formik в нескольких проектах и могу подробнее рассказать об этом опыте.

Что такое Formik

Formik — библиотека для React, которая упрощает работу с формами. Она справляется с состоянием полей, валидацией и отправкой данных.

Мой опыт

Я использовал Formik в проекте для:

• Формы авторизации (login, password reset)
• Формы регистрации с комплексной валидацией
• Формы редактирования профиля с динамическим добавлением полей
• Формы загрузки файлов с callback-ами

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .required('Email required'),
  password: Yup.string()
    .min(8, 'At least 8 characters')
    .required('Password required')
});

function LoginForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={async (values) => {
        await apiClient.login(values);
      }}
    >
      {({ isSubmitting, isValid }) => (
        <Form>
          <Field
            name="email"
            type="email"
            placeholder="Email"
          />
          <ErrorMessage name="email" />
          
          <Field
            name="password"
            type="password"
            placeholder="Password"
          />
          <ErrorMessage name="password" />
          
          <button 
            type="submit" 
            disabled={isSubmitting || !isValid}
          >
            Login
          </button>
        </Form>
      )}
    </Formik>
  );
}

Плюсы Formik

1. Автоматическое управление состоянием

• Не нужно писать state для каждого поля
• Formik хранит значения, ошибки, коснулось ли поле

2. Встроенная валидация

validationSchema={Yup.object().shape({
  field: Yup.string().required()
})}

3. Обработка form submission

onSubmit={async (values) => {
  // Formik автоматически ставит isSubmitting = true
  // Disable кнопку, показывает loading state
}}

4. Touch tracking

// Показывать ошибку только если user коснулся поля
{touched.email && errors.email && <Error />}

Минусы Formik

1. Boilerplate кода

// Много паттерн-повторяющегося кода
<Field>
  <ErrorMessage>
// Это повторяется для каждого поля

2. Performance проблемы с большими формами

• Если форм с 100+ полями, Formik перерендеживает все (re-render all fields)
• Решение: Field-level validation и memoization

const MemoizedField = React.memo(({name, ...props}) => (
  <Field name={name} {...props} />
));

3. Сложность с асинхронной валидацией

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .test(
      'unique-email',
      'Email already exists',
      async (value) => {
        const response = await fetch(`/api/check-email?email=${value}`);
        return response.ok;
      }
    )
});

Как я это решил

1. Custom компоненты Я создал custom компоненты на базе Field/ErrorMessage, чтобы избежать boilerplate:

function FormField({ name, label, type = 'text' }) {
  return (
    <Formik.Field>
      {({ field, form }) => (
        <div>
          <label>{label}</label>
          <input {...field} type={type} />
          {form.touched[name] && form.errors[name] && (
            <span className="error">{form.errors[name]}</span>
          )}
        </div>
      )}
    </Formik.Field>
  );
}

2. React Hook Form В новых проектах я перешел на React Hook Form — он легче и быстрее:

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

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      {errors.email && <span>Email required</span>}
    </form>
  );
}

Вывод

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

• Комплексные формы с множеством валидаций
• Нужен touch tracking и комплексное состояние
• Team уже знает Formik

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

• Простые формы
• Performance важен
• Modern React (hooks-based)

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

• Одноё поле (контролировать руками)
• Native HTML form submission