// Form library handles state
const { register, handleSubmit } = useForm({
  // Validation library handles rules
  resolver: zodResolver(schema)
})

const [value, setValue] = useState('')
<input value={value} onChange={e => setValue(e.target.value)} />
// Every keystroke: setState → re-render

const inputRef = useRef()
<input ref={inputRef} />
// Read value: inputRef.current.value
// No re-renders during typing

// Inline (hard to reuse, test, maintain)
if (!email.includes('@')) {
  setError('Invalid email')
}
if (password.length < 8) {
  setError('Too short')
}

// Schema (reusable, testable, type-safe)
const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

const schema = z.object({
  email: z.string(),
  age: z.number(),
})

// Automatically: { email: string; age: number }
type FormData = z.infer<typeof schema>

<input {...register('email')} />
{errors.email && <span>{errors.email.message}</span>}

{Object.values(errors).map(err => <li>{err.message}</li>)}

// After API call fails
setError('email', { message: 'Email already exists' })

// Tasks list with add/remove
const { fields, append, remove } = useFieldArray({ name: 'tasks' })

{fields.map((field, index) => (
  <div key={field.id}>
    <input {...register(`tasks.${index}.name`)} />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
))}
<button onClick={() => append({ name: '' })}>Add Task</button>

const schema = z.object({
  user: z.object({
    name: z.string(),
    address: z.object({
      street: z.string(),
      city: z.string(),
    }),
  }),
})

// Access nested fields
register('user.name')
register('user.address.street')

import { zodResolver } from '@hookform/resolvers/zod'
import { yupResolver } from '@hookform/resolvers/yup'
import { valibotResolver } from '@hookform/resolvers/valibot'

useForm({ resolver: zodResolver(schema) })
useForm({ resolver: yupResolver(schema) })
useForm({ resolver: valibotResolver(schema) })

const { register } = useForm({
  defaultValues: {
    name: user.name,
    email: user.email,
  },
})

const schema = z.object({
  username: z.string().refine(
    async (val) => {
      const exists = await checkUsernameExists(val)
      return !exists
    },
    { message: 'Username taken' }
  ),
})

const schema = z.object({
  email: z.string().email().transform(val => val.toLowerCase()),
  age: z.string().transform(val => parseInt(val, 10)),
})

// Immediate feedback as user types
{errors.email && <span>Invalid email</span>}

// After submit, server checks
const result = await api.submit(data)
if (result.errors) {
  setServerErrors(result.errors)
}

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

type FormData = z.infer<typeof schema>

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="password" {...register('password')} />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">Login</button>
    </form>
  )
}

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

const schema = Yup.object({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(8, 'Min 8 chars').required('Required'),
})

function LoginForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={schema}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="email" type="email" />
        <ErrorMessage name="email" />

        <Field name="password" type="password" />
        <ErrorMessage name="password" />

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  )
}

<Formik initialValues={{ email: '' }} onSubmit={handleSubmit}>
  <Form>
    <Field name="email" />
  </Form>
</Formik>

const { register, handleSubmit } = useForm({ defaultValues: { email: '' } })
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register('email')} />
</form>

<Formik validationSchema={yupSchema}>

useForm({ resolver: zodResolver(zodSchema) })

<Formik>
  {({ values }) => <span>{values.email}</span>}
</Formik>

const { watch } = useForm()
const email = watch('email')

// Controlled (Formik style) - re-renders on every change
const [value, setValue] = useState('')
<input value={value} onChange={e => setValue(e.target.value)} />

// Uncontrolled (RHF style) - no re-renders
const { register } = useForm()
<input {...register('email')} />

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

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm()

  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: 'Email required' })} />
      {errors.email && <span>{errors.email.message}</span>}

      <input
        type="password"
        {...register('password', { minLength: { value: 8, message: 'Min 8 chars' } })}
      />
      {errors.password && <span>{errors.password.message}</span>}

      <button disabled={isSubmitting}>Submit</button>
    </form>
  )
}

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
})

type FormData = z.infer<typeof schema>

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  })
  // ...
}

const { formState } = useForm()
// formState.errors - validation errors
// formState.isDirty - form has been modified
// formState.isValid - all validations pass
// formState.isSubmitting - form is submitting
// formState.isSubmitSuccessful - submission succeeded

const { watch } = useForm()
const email = watch('email') // Subscribe to single field
const allValues = watch() // Subscribe to all fields

const { reset } = useForm()
reset() // Reset to default values
reset({ email: '[email protected]' }) // Reset with new values

import { useFieldArray } from 'react-hook-form'

const { fields, append, remove } = useFieldArray({
  control,
  name: 'items',
})

npm install @hookform/resolvers

npm install react-hook-form @hookform/resolvers zod

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

type FormData = z.infer<typeof schema>

import { useForm } from 'react-hook-form'
import { valibotResolver } from '@hookform/resolvers/valibot'
import * as v from 'valibot'

const schema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
})

import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'

const form = useForm({
  validatorAdapter: zodValidator(),
  // ...
})

import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
})

useForm({ resolver: zodResolver(schema) })
useForm({ resolver: valibotResolver(schema) })
useForm({ resolver: yupResolver(schema) })

// Only re-renders when this specific field changes
<form.Field name="email">
  {(field) => <input value={field.state.value} />}
</form.Field>

const form = useForm({
  defaultValues: {
    email: '',
    age: 0,
  },
})

// TypeScript knows: email is string, age is number
form.getFieldValue('email') // string
form.getFieldValue('age') // number

import { useForm } from '@tanstack/react-form'

function LoginForm() {
  const form = useForm({
    defaultValues: {
      email: '',
      password: '',
    },
    onSubmit: async ({ value }) => {
      console.log(value)
    },
  })

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        form.handleSubmit()
      }}
    >
      <form.Field name="email">
        {(field) => (
          <>
            <input
              value={field.state.value}
              onChange={(e) => field.handleChange(e.target.value)}
              onBlur={field.handleBlur}
            />
            {field.state.meta.errors.length > 0 && (
              <span>{field.state.meta.errors[0]}</span>
            )}
          </>
        )}
      </form.Field>

      <button type="submit">Submit</button>
    </form>
  )
}

import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'

const form = useForm({
  validatorAdapter: zodValidator(),
  defaultValues: {
    email: '',
  },
})

<form.Field
  name="email"
  validators={{
    onChange: z.string().email('Invalid email'),
    onBlur: z.string().min(1, 'Required'),
  }}
>
  {(field) => /* ... */}
</form.Field>

// Zod - methods chained on objects
import { z } from 'zod'
const schema = z.string().email().min(5)

// Valibot - functions composed in pipelines
import * as v from 'valibot'
const schema = v.pipe(v.string(), v.email(), v.minLength(5))

import * as v from 'valibot'

// Primitives
const str = v.string()
const num = v.number()
const bool = v.boolean()

// With validations (using pipe)
const email = v.pipe(v.string(), v.email())
const age = v.pipe(v.number(), v.minValue(0), v.maxValue(120))

// Objects
const UserSchema = v.object({
  name: v.pipe(v.string(), v.minLength(1)),
  email: v.pipe(v.string(), v.email()),
  age: v.optional(v.number()),
})

// Type inference (same as Zod)
type User = v.InferOutput<typeof UserSchema>

// Parse (throws on error)
const user = v.parse(UserSchema, data)

// SafeParse (never throws)
const result = v.safeParse(UserSchema, data)
if (result.success) {
  console.log(result.output)
} else {
  console.log(result.issues)
}

// Zod
const schema = z.object({
  email: z.string().email().min(5),
  age: z.number().min(0).optional(),
})

// Valibot
const schema = v.object({
  email: v.pipe(v.string(), v.email(), v.minLength(5)),
  age: v.optional(v.pipe(v.number(), v.minValue(0))),
})

import { useForm } from 'react-hook-form'
import { valibotResolver } from '@hookform/resolvers/valibot'
import * as v from 'valibot'

const schema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
})

type FormData = v.InferOutput<typeof schema>

function Form() {
  const { register, handleSubmit } = useForm<FormData>({
    resolver: valibotResolver(schema),
  })
  // ...
}

import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().email('Invalid email').required('Required'),
  age: yup.number().min(0).max(120).required(),
  website: yup.string().url().nullable(),
})

// Validate
try {
  const result = await schema.validate(data)
} catch (error) {
  console.log(error.errors) // Array of error messages
}

// Validate sync
const isValid = schema.isValidSync(data)

// Schema
const schema = yup.object({ name: yup.string() })

// Type might not match exactly
type User = yup.InferType<typeof schema>
// Sometimes has issues with optional/nullable

const schema = z.object({ name: z.string() })
type User = z.infer<typeof schema>
// Always accurate

// Yup
yup.string().required()
yup.number().min(0)
yup.object({ name: yup.string() })
yup.array().of(yup.string())

// Zod
z.string().min(1)  // Note: Zod has no required(), use min(1)
z.number().min(0)
z.object({ name: z.string() })
z.array(z.string())

// Define types
type User = { email: string; age: number }

// Define validation separately (can drift!)
function validate(data: unknown) {
  if (!data.email || !data.age) throw new Error()
}

import { z } from 'zod'

// Schema IS the type definition
const UserSchema = z.object({
  email: z.string().email(),
  age: z.number().min(0),
})

// Derive TypeScript type from schema
type User = z.infer<typeof UserSchema>
// { email: string; age: number }

// Validation uses the same schema
const result = UserSchema.safeParse(unknownData)

import { z } from 'zod'

// Primitives
const str = z.string()
const num = z.number()
const bool = z.boolean()
const date = z.date()

// With validations
const email = z.string().email()
const age = z.number().min(0).max(120)
const url = z.string().url()

// Objects
const UserSchema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  age: z.number().optional(),
})

// Arrays
const TagsSchema = z.array(z.string())

// Enums
const RoleSchema = z.enum(['admin', 'user', 'guest'])

// Union
const IdSchema = z.union([z.string(), z.number()])
// or: z.string().or(z.number())

// Parse (throws on error)
try {
  const user = UserSchema.parse(data)
} catch (error) {
  // ZodError with details
}

// SafeParse (never throws)
const result = UserSchema.safeParse(data)
if (result.success) {
  console.log(result.data) // typed correctly
} else {
  console.log(result.error.issues) // validation errors
}

const schema = z.object({
  email: z.string().email({ message: 'Invalid email address' }),
  password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
})

const schema = z.string().transform((val) => val.toUpperCase())
schema.parse('hello') // 'HELLO'

const schema = z.string().refine(
  (val) => val.includes('@'),
  { message: 'Must contain @' }
)

const UserSchema = z.object({
  id: z.string(),
  email: z.string(),
  password: z.string(),
})

// Pick specific fields
const PublicUser = UserSchema.pick({ id: true, email: true })

// Omit fields
const CreateUser = UserSchema.omit({ id: true })

// Make all optional
const PartialUser = UserSchema.partial()

// Extend
const AdminSchema = UserSchema.extend({
  role: z.literal('admin'),
})

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

type FormData = z.infer<typeof schema>

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  })
  // ...
}

// Every keystroke: setState → re-render
const [values, setValues] = useState({ email: '' })

<input
  value={values.email}
  onChange={(e) => setValues({ ...values, email: e.target.value })}
/>

type FormikState<Values> = {
  values: Values              // Current form values
  errors: FormikErrors<Values>  // Validation errors
  touched: FormikTouched<Values> // User interaction
  isSubmitting: boolean         // Submit in progress
  isValidating: boolean         // Validation running
  submitCount: number           // Number of submit attempts
  initialValues: Values         // For reset
  initialErrors: FormikErrors<Values>
  initialTouched: FormikTouched<Values>
  initialStatus: any
  status: any                   // Custom status (user-defined)
}

<Formik
  initialValues={{ email: '' }}
  onSubmit={handleSubmit}
>
  {(formikProps) => (
    <form onSubmit={formikProps.handleSubmit}>
      <input
        name="email"
        value={formikProps.values.email}
        onChange={formikProps.handleChange}
        onBlur={formikProps.handleBlur}
      />
      {formikProps.errors.email && <div>{formikProps.errors.email}</div>}
    </form>
  )}
</Formik>

function MyForm() {
  const formik = useFormik({
    initialValues: { email: '' },
    onSubmit: handleSubmit,
  })

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
      />
    </form>
  )
}

// Formik automatically tracks fields by name attribute
<input name="email" onChange={formik.handleChange} />

// Or use Field component:
<Field name="email" />
// Automatically wires onChange, onBlur, value

// Every keystroke re-renders ALL fields
<Field name="field1" />
<Field name="field2" />
<Field name="field3" />
// All 3 re-render when field1 changes

const MemoField = React.memo(Field)

<MemoField name="field1" />
<MemoField name="field2" />
<MemoField name="field3" />
// Only field1 re-renders (if values are compared correctly)

import { FastField } from 'formik'

<FastField name="field1" />
// Only re-renders when field1 value/error/touched changes
// Skips re-renders when other fields change

const formik = useFormik({
  initialValues: {
    email: '',
    password: '',
  },
  validationSchema: yupSchema,  // Yup integration
  validate: customValidator,     // Or custom function
  onSubmit: async (values, actions) => {
    await submitForm(values)
    actions.setSubmitting(false)
    actions.resetForm()
  },
  enableReinitialize: false,    // Re-initialize when initialValues change
  validateOnChange: true,       // Validate on every change
  validateOnBlur: true,         // Validate on blur
  validateOnMount: false,       // Validate on mount
})

// Returns object with:
formik.values           // Current values
formik.errors           // Validation errors
formik.touched          // Touched fields
formik.isSubmitting     // Submit state
formik.handleSubmit     // Submit handler
formik.handleChange     // Change handler
formik.handleBlur       // Blur handler
formik.setFieldValue    // Set single field
formik.setValues        // Set all values
formik.setFieldError    // Set single error
formik.setFieldTouched  // Set touched state
formik.resetForm        // Reset to initial
formik.validateForm     // Trigger validation

import { Field } from 'formik'

<Field name="email" />
// Renders <input> with automatic wiring

<Field name="email" type="email" placeholder="Email" />

// Or with render prop:
<Field name="email">
  {({ field, form, meta }) => (
    <div>
      <input {...field} />
      {meta.touched && meta.error && <div>{meta.error}</div>}
    </div>
  )}
</Field>

field: {
  name: string           // Field name
  value: any             // Current value
  onChange: Function     // Change handler
  onBlur: Function       // Blur handler
}

form: FormikProps        // Full formik instance

meta: {
  value: any             // Current value (duplicate of field.value)
  error: string          // Validation error
  touched: boolean       // Has been blurred
  initialValue: any      // Initial value
  initialTouched: boolean
  initialError: string
}

import { FieldArray } from 'formik'

<FieldArray name="friends">
  {(arrayHelpers) => (
    <div>
      {formik.values.friends.map((friend, index) => (
        <div key={index}>
          <Field name={`friends.${index}.name`} />
          <button onClick={() => arrayHelpers.remove(index)}>Remove</button>
        </div>
      ))}
      <button onClick={() => arrayHelpers.push({ name: '' })}>Add</button>
    </div>
  )}
</FieldArray>

// arrayHelpers provides:
arrayHelpers.push(value)
arrayHelpers.pop()
arrayHelpers.swap(indexA, indexB)
arrayHelpers.move(from, to)
arrayHelpers.insert(index, value)
arrayHelpers.unshift(value)
arrayHelpers.remove(index)
arrayHelpers.replace(index, value)

import { ErrorMessage } from 'formik'

<ErrorMessage name="email" />
// Renders error text if field has error + is touched

// Custom render:
<ErrorMessage name="email">
  {(msg) => <div className="error">{msg}</div>}
</ErrorMessage>

// Component prop:
<ErrorMessage name="email" component="div" className="error" />

import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().email().required(),
  age: yup.number().positive().integer(),
})

<Formik validationSchema={schema} {...} />
// Automatic validation on change/blur/submit

<Formik
  validate={(values) => {
    const errors = {}

    if (!values.email) {
      errors.email = 'Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
      errors.email = 'Invalid email'
    }

    return errors
  }}
/>

<Formik
  validate={async (values) => {
    const errors = {}

    if (values.username) {
      const exists = await checkUsername(values.username)
      if (exists) errors.username = 'Username taken'
    }

    return errors
  }}
/>

function validateEmail(value) {
  if (!value) return 'Required'
  if (!/^[A-Z0-9._%+-]+@/.test(value)) return 'Invalid email'
}

<Field name="email" validate={validateEmail} />

const formik = useFormik({
  initialValues: {
    user: {
      name: '',
      address: {
        street: '',
        city: '',
      },
    },
  },
})

// Dot notation for fields:
<Field name="user.name" />
<Field name="user.address.street" />

// Access values:
formik.values.user.address.street

// Set values:
formik.setFieldValue('user.address.street', '123 Main St')

// Track which fields user interacted with
formik.touched.email  // true after blur

// Only show errors for touched fields:
{formik.touched.email && formik.errors.email && (
  <div>{formik.errors.email}</div>
)}

// Set touched programmatically:
formik.setFieldTouched('email', true)
formik.setTouched({ email: true, password: true })

<Formik
  onSubmit={async (values, actions) => {
    // values: form data
    // actions: formik helpers

    try {
      await submitToAPI(values)
      actions.setStatus('success')
      actions.resetForm()
    } catch (error) {
      actions.setErrors({ server: error.message })
      actions.setStatus('error')
    } finally {
      actions.setSubmitting(false)
    }
  }}
/>

actions.setSubmitting(false)      // Stop loading state
actions.setStatus(status)          // Set custom status
actions.setErrors({ field: 'error' })  // Set errors
actions.setFieldError('field', 'error')
actions.resetForm()                // Reset to initial
actions.validateForm()             // Trigger validation

<Formik initialValues={{ role: 'user', permissions: [] }}>
  {(formik) => (
    <Form>
      <Field name="role" as="select">
        <option value="user">User</option>
        <option value="admin">Admin</option>
      </Field>

      {formik.values.role === 'admin' && (
        <Field name="permissions" as="select" multiple>
          <option value="read">Read</option>
          <option value="write">Write</option>
        </Field>
      )}
    </Form>
  )}
</Formik>

const schema = yup.object({
  role: yup.string().required(),
  permissions: yup.array().when('role', {
    is: 'admin',
    then: (schema) => schema.min(1).required(),
    otherwise: (schema) => schema.notRequired(),
  }),
})

import { useFormikContext } from 'formik'

function NestedComponent() {
  const formik = useFormikContext()
  // Access formik.values, formik.errors, etc.
  return <div>{formik.values.email}</div>
}

<Formik {...}>
  {() => (
    <Form>
      <NestedComponent />
    </Form>
  )}
</Formik>

// Reset to initial values:
formik.resetForm()

// Reset to new values:
formik.resetForm({
  values: { email: '[email protected]' },
  errors: {},
  touched: {},
})

// Reset button:
<button type="button" onClick={formik.handleReset}>
  Reset
</button>

import { useFormik } from 'formik'

interface FormValues {
  email: string
  age: number
}

const formik = useFormik<FormValues>({
  initialValues: {
    email: '',
    age: 0,
  },
  onSubmit: (values) => {
    // values is typed as FormValues
  },
})

// Type-safe access:
formik.values.email   // string
formik.values.age     // number
formik.values.other   // ✗ Type error

import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().required(),
  age: yup.number().required(),
})

type FormValues = yup.InferType<typeof schema>

const formik = useFormik<FormValues>({
  initialValues: {
    email: '',
    age: 0,
  },
  validationSchema: schema,
})

import { Field, FieldProps } from 'formik'

<Field name="email">
  {({ field, form, meta }: FieldProps<string, FormValues>) => (
    <input {...field} />
  )}
</Field>

import { renderHook, act } from '@testing-library/react'
import { useFormik } from 'formik'

test('handles form submission', async () => {
  const onSubmit = jest.fn()

  const { result } = renderHook(() =>
    useFormik({
      initialValues: { email: '' },
      onSubmit,
    })
  )

  act(() => {
    result.current.setFieldValue('email', '[email protected]')
  })

  await act(async () => {
    await result.current.submitForm()
  })

  expect(onSubmit).toHaveBeenCalledWith(
    { email: '[email protected]' },
    expect.anything()
  )
})

import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('validates and submits form', async () => {
  const onSubmit = jest.fn()

  render(<MyFormikForm onSubmit={onSubmit} />)

  const emailInput = screen.getByLabelText('Email')
  await userEvent.type(emailInput, '[email protected]')

  const submitButton = screen.getByRole('button', { name: /submit/i })
  await userEvent.click(submitButton)

  await waitFor(() => {
    expect(onSubmit).toHaveBeenCalledWith(
      { email: '[email protected]' },
      expect.anything()
    )
  })
})

test('shows validation errors', async () => {
  render(<MyFormikForm />)

  const submitButton = screen.getByRole('button')
  await userEvent.click(submitButton)

  await waitFor(() => {
    expect(screen.getByText('Email is required')).toBeInTheDocument()
  })
})

// Formik
const formik = useFormik({ initialValues, onSubmit })
<input {...formik.getFieldProps('email')} />

// React Hook Form
const { register, handleSubmit } = useForm({ defaultValues })
<input {...register('email')} />

// Formik
const formik = useFormik({ initialValues, onSubmit })

// TanStack Form
const form = useForm({ defaultValues, onSubmit })

import { FastField } from 'formik'

// Only re-renders when this field changes
<FastField name="email" />

const MemoField = React.memo(({ name }) => (
  <Field name={name} />
))

import { debounce } from 'lodash'

const debouncedValidate = debounce((values) => {
  // validation logic
}, 300)

<Formik validate={debouncedValidate} />

<Formik
  validateOnChange={false}  // Only validate on blur/submit
  validateOnBlur={true}
/>

// Every keystroke: setState → re-render entire form
const [values, setValues] = useState({})
<input value={values.email} onChange={e => setValues({...values, email: e.target.value})} />

// DOM holds the value, no re-renders during typing
const emailRef = useRef()
<input ref={emailRef} name="email" />
// Read value only on submit: emailRef.current.value

const formState = useRef({
  values: {},           // Current field values
  errors: {},           // Validation errors
  touchedFields: {},    // User interaction tracking
  dirtyFields: {},      // Modified since initialization
  isSubmitting: false,  // Submit in progress
  // ... more state
})

const { register } = useForm()
<input {...register('email')} />

// register() returns:
{
  ref: (el) => storeRef(el),        // Store DOM ref
  name: 'email',                     // Field identifier
  onChange: (e) => handleChange(e),  // Validation trigger
  onBlur: (e) => handleBlur(e),      // Touch tracking
}