Tell us about your experience with Formik and Yup: how complex were the forms you wrote, how did you build validation schemas?

Formik is a library for managing form state in React, and Yup is used for data validation. I have worked with forms of varying complexity: from simple ones with a few fields to multi-step and dynamic forms.

To build validation schemas with Yup, I used method chains, for example:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email format').required('Required'),
  password: Yup.string().min(8, 'Minimum 8 characters').required('Required'),
  age: Yup.number().min(18, 'Must be at least 18').nullable(),
});

Formik integrates with Yup through the validationSchema prop, which allows automatic validation of the form on changes. For complex forms, I split the schema into parts and combined them, as well as used conditional validation depending on the form's state.