What are the best practices for validation in React?

What are the best practices for validation in React?

Some best practices include using controlled components, leveraging libraries like Formik or React Hook Form, and validating inputs on both client and server sides.

Can you explain how to use Formik for validation?

Sure! Formik simplifies form handling in React. You can define your form state, validation schema, and handle submission easily. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ email: '' }}
      validate={values => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (!/\S+@\S+\.\S+/.test(values.email)) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

This sets up a basic form with email validation.