Master form validation in React with hooks. Learn real-time validation, error handling, field dependencies, and production-ready patterns with complete TypeScript examples.

# React Form Validation Using Hooks: Complete Patterns & Best Practices

Form validation is where React developers encounter their first real complexity. Simple validation seems straightforward—check input length, match patterns, compare fields—but production requirements expose hidden challenges: real-time feedback vs. performance, field dependencies that create circular validations, server-side validation integration, async validation for usernames, showing errors only after user interaction, preserving validation state through re-renders.

Most developers either over-engineer with heavyweight libraries or under-engineer with inline validation scattered through components. Neither scales. This guide shows how to build production-grade form validation using React hooks, handling edge cases that separate good UX from frustrating UX.

# Table of Contents

The Form Validation Problem
Basic Validation Hook Pattern
Advanced: Real-Time Validation with Dependencies
Schema-Based Validation
Async Validation and Server Integration
Practical Application: Complete Form Example
Performance Optimization
FAQ

# The Form Validation Problem

Most developers start with inline validation:

      
javascript

// ❌ Problems: scattered logic, repetitive, hard to maintain
function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();

    const newErrors = {};

    // Validation logic scattered everywhere
    if (!email) {
      newErrors.email = 'Email is required';
    } else if (!email.includes('@')) {
      newErrors.email = 'Invalid email';
    }

    if (!password) {
      newErrors.password = 'Password is required';
    } else if (password.length < 8) {
      newErrors.password = 'Password too short';
    }

    // More validations...

    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      submitForm();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

Problems emerge immediately:

Scattered Logic: Validation rules live in the component, making them hard to reuse or test
No Real-Time Feedback: Users see errors only on submit, not while typing
State Explosion: Managing email, password, and corresponding errors creates boilerplate
No Async Support: Can't validate usernames or emails against server
Field Dependencies: Cross-field validation (password confirmation) becomes messy
Performance: Every keystroke might trigger expensive validations

A hook-based approach centralizes validation logic and handles these cases elegantly.

# Basic Validation Hook Pattern

# Core useForm Hook (TypeScript)

      
typescript

import { useState, useCallback, useEffect } from 'react';

interface FieldError {
  [key: string]: string;
}

interface FormState<T> {
  values: T;
  errors: FieldError;
  touched: { [K in keyof T]?: boolean };
  isDirty: boolean;
  isSubmitting: boolean;
}

interface UseFormOptions<T> {
  initialValues: T;
  validate?: (values: T) => FieldError;
  onSubmit: (values: T) => void | Promise<void>;
  onError?: (errors: FieldError) => void;
}

export function useForm<T extends Record<string, any>>(
  options: UseFormOptions<T>
) {
  const { initialValues, validate, onSubmit, onError } = options;

  const [formState, setFormState] = useState<FormState<T>>({
    values: initialValues,
    errors: {},
    touched: {},
    isDirty: false,
    isSubmitting: false,
  });

  // Update field value
  const setFieldValue = useCallback(
    (field: keyof T, value: any) => {
      setFormState(prev => ({
        ...prev,
        values: { ...prev.values, [field]: value },
        isDirty: true,
      }));
    },
    []
  );

  // Mark field as touched (show errors)
  const setFieldTouched = useCallback(
    (field: keyof T, touched: boolean = true) => {
      setFormState(prev => ({
        ...prev,
        touched: { ...prev.touched, [field]: touched },
      }));
    },
    []
  );

  // Validate on values change
  useEffect(() => {
    if (!validate) return;

    const errors = validate(formState.values);
    setFormState(prev => ({ ...prev, errors }));
  }, [formState.values, validate]);

  // Submit handler
  const handleSubmit = useCallback(
    async (e: React.FormEvent) => {
      e.preventDefault();

      // Mark all fields as touched
      const allTouched = Object.keys(formState.values).reduce(
        (acc, field) => ({ ...acc, [field]: true }),
        {}
      );

      setFormState(prev => ({
        ...prev,
        touched: allTouched,
      }));

      // Validate
      if (validate) {
        const errors = validate(formState.values);
        if (Object.keys(errors).length > 0) {
          setFormState(prev => ({ ...prev, errors }));
          onError?.(errors);
          return;
        }
      }

      // Submit
      setFormState(prev => ({ ...prev, isSubmitting: true }));

      try {
        await onSubmit(formState.values);
      } catch (error) {
        console.error('Form submission error:', error);
      } finally {
        setFormState(prev => ({ ...prev, isSubmitting: false }));
      }
    },
    [formState.values, validate, onSubmit, onError]
  );

  // Reset form
  const reset = useCallback(() => {
    setFormState({
      values: initialValues,
      errors: {},
      touched: {},
      isDirty: false,
      isSubmitting: false,
    });
  }, [initialValues]);

  return {
    ...formState,
    setFieldValue,
    setFieldTouched,
    handleSubmit,
    reset,
    getFieldProps: (field: keyof T) => ({
      value: formState.values[field],
      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
        setFieldValue(field, e.target.value),
      onBlur: () => setFieldTouched(field, true),
    }),
  };
}

# JavaScript Version

      
javascript

export function useForm(options) {
  const { initialValues, validate, onSubmit, onError } = options;

  const [formState, setFormState] = useState({
    values: initialValues,
    errors: {},
    touched: {},
    isDirty: false,
    isSubmitting: false,
  });

  const setFieldValue = useCallback((field, value) => {
    setFormState(prev => ({
      ...prev,
      values: { ...prev.values, [field]: value },
      isDirty: true,
    }));
  }, []);

  const setFieldTouched = useCallback((field, touched = true) => {
    setFormState(prev => ({
      ...prev,
      touched: { ...prev.touched, [field]: touched },
    }));
  }, []);

  useEffect(() => {
    if (!validate) return;

    const errors = validate(formState.values);
    setFormState(prev => ({ ...prev, errors }));
  }, [formState.values, validate]);

  const handleSubmit = useCallback(
    async (e) => {
      e.preventDefault();

      const allTouched = Object.keys(formState.values).reduce(
        (acc, field) => ({ ...acc, [field]: true }),
        {}
      );

      setFormState(prev => ({
        ...prev,
        touched: allTouched,
      }));

      if (validate) {
        const errors = validate(formState.values);
        if (Object.keys(errors).length > 0) {
          setFormState(prev => ({ ...prev, errors }));
          onError?.(errors);
          return;
        }
      }

      setFormState(prev => ({ ...prev, isSubmitting: true }));

      try {
        await onSubmit(formState.values);
      } catch (error) {
        console.error('Form submission error:', error);
      } finally {
        setFormState(prev => ({ ...prev, isSubmitting: false }));
      }
    },
    [formState.values, validate, onSubmit, onError]
  );

  const reset = useCallback(() => {
    setFormState({
      values: initialValues,
      errors: {},
      touched: {},
      isDirty: false,
      isSubmitting: false,
    });
  }, [initialValues]);

  return {
    ...formState,
    setFieldValue,
    setFieldTouched,
    handleSubmit,
    reset,
    getFieldProps: (field) => ({
      value: formState.values[field],
      onChange: (e) =>
        setFieldValue(field, e.target.value),
      onBlur: () => setFieldTouched(field, true),
    }),
  };
}

# Usage Example

      
typescript

interface SignupFormValues {
  email: string;
  password: string;
  confirmPassword: string;
}

function SignupForm() {
  const form = useForm<SignupFormValues>({
    initialValues: {
      email: '',
      password: '',
      confirmPassword: '',
    },

    validate: (values) => {
      const errors: FieldError = {};

      if (!values.email) {
        errors.email = 'Email is required';
      } else if (!values.email.includes('@')) {
        errors.email = 'Invalid email';
      }

      if (!values.password) {
        errors.password = 'Password is required';
      } else if (values.password.length < 8) {
        errors.password = 'Password must be at least 8 characters';
      }

      if (values.password !== values.confirmPassword) {
        errors.confirmPassword = 'Passwords do not match';
      }

      return errors;
    },

    onSubmit: async (values) => {
      await fetch('/api/signup', {
        method: 'POST',
        body: JSON.stringify(values),
      });
    },
  });

  return (
    <form onSubmit={form.handleSubmit}>
      <div className="form-group">
        <label>Email</label>
        <input
          type="email"
          {...form.getFieldProps('email')}
        />
        {form.touched.email && form.errors.email && (
          <span className="error">{form.errors.email}</span>
        )}
      </div>

      <div className="form-group">
        <label>Password</label>
        <input
          type="password"
          {...form.getFieldProps('password')}
        />
        {form.touched.password && form.errors.password && (
          <span className="error">{form.errors.password}</span>
        )}
      </div>

      <div className="form-group">
        <label>Confirm Password</label>
        <input
          type="password"
          {...form.getFieldProps('confirmPassword')}
        />
        {form.touched.confirmPassword && form.errors.confirmPassword && (
          <span className="error">{form.errors.confirmPassword}</span>
        )}
      </div>

      <button type="submit" disabled={form.isSubmitting}>
        {form.isSubmitting ? 'Signing up...' : 'Sign up'}
      </button>
    </form>
  );
}

# Advanced: Real-Time Validation with Dependencies

# Field-Level Validation Hook

      
typescript

interface UseFieldOptions {
  value: any;
  initialTouched?: boolean;
  validate?: (value: any) => string | undefined;
  onBlur?: () => void;
  onChange?: (value: any) => void;
}

export function useField(options: UseFieldOptions) {
  const { value, initialTouched = false, validate, onBlur, onChange } = options;

  const [touched, setTouched] = useState(initialTouched);
  const [error, setError] = useState<string | undefined>();

  // Validate on value change
  useEffect(() => {
    if (validate) {
      const validationError = validate(value);
      setError(validationError);
    }
  }, [value, validate]);

  return {
    value,
    error: touched ? error : undefined,
    touched,
    isTouched: touched,
    bind: {
      value,
      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
        onChange?.(e.target.value);
      },
      onBlur: () => {
        setTouched(true);
        onBlur?.();
      },
    },
  };
}

// Usage
function EmailField() {
  const email = useField({
    value: emailValue,
    validate: (value) => {
      if (!value) return 'Email is required';
      if (!value.includes('@')) return 'Invalid email';
      return undefined;
    },
  });

  return (
    <>
      <input {...email.bind} placeholder="Email" />
      {email.error && <span className="error">{email.error}</span>}
    </>
  );
}

# Cross-Field Validation

      
typescript

export function useFormWithDependencies<T extends Record<string, any>>(
  options: UseFormOptions<T> & {
    // Validate field based on other fields
    validateField?: (field: keyof T, values: T) => string | undefined;
  }
) {
  const { validateField, ...baseOptions } = options;

  const baseForm = useForm(baseOptions);

  // Validate specific field with context of all values
  const validateSingleField = useCallback(
    (field: keyof T): string | undefined => {
      if (!validateField) return undefined;
      return validateField(field, baseForm.values);
    },
    [baseForm.values, validateField]
  );

  return {
    ...baseForm,
    validateSingleField,
  };
}

// Usage: Password confirmation
function PasswordForm() {
  const form = useFormWithDependencies({
    initialValues: {
      password: '',
      confirmPassword: '',
    },

    validateField: (field, values) => {
      if (field === 'confirmPassword') {
        if (values.password !== values.confirmPassword) {
          return 'Passwords must match';
        }
      }
      return undefined;
    },

    onSubmit: async (values) => {
      await fetch('/api/update-password', {
        method: 'POST',
        body: JSON.stringify(values),
      });
    },
  });

  return (
    <form onSubmit={form.handleSubmit}>
      {/* Password fields */}
    </form>
  );
}

# Schema-Based Validation

Using a validation library like Zod or Yup:

      
typescript

import { z } from 'zod';

const signupSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Password too short'),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: 'Passwords do not match',
  path: ['confirmPassword'],
});

type SignupFormValues = z.infer<typeof signupSchema>;

export function useSchemaValidation<T>(schema: z.ZodSchema<T>) {
  return useCallback((values: T): FieldError => {
    const result = schema.safeParse(values);

    if (!result.success) {
      return result.error.flatten().fieldErrors as FieldError;
    }

    return {};
  }, [schema]);
}

// Usage
function SignupForm() {
  const validate = useSchemaValidation(signupSchema);

  const form = useForm<SignupFormValues>({
    initialValues: {
      email: '',
      password: '',
      confirmPassword: '',
    },
    validate,
    onSubmit: async (values) => {
      await fetch('/api/signup', { method: 'POST', body: JSON.stringify(values) });
    },
  });

  return (
    <form onSubmit={form.handleSubmit}>
      {/* Form fields using form.getFieldProps() */}
    </form>
  );
}

# Async Validation and Server Integration

# Async Validation Hook

      
typescript

export function useAsyncValidation<T>(
  validator: (value: T) => Promise<string | undefined>,
  debounceMs: number = 500
) {
  const [error, setError] = useState<string | undefined>();
  const [isValidating, setIsValidating] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout>();

  const validate = useCallback(
    (value: T) => {
      setIsValidating(true);

      // Clear previous timeout
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }

      timeoutRef.current = setTimeout(async () => {
        try {
          const validationError = await validator(value);
          setError(validationError);
        } catch (err) {
          setError('Validation failed');
        } finally {
          setIsValidating(false);
        }
      }, debounceMs);
    },
    [validator, debounceMs]
  );

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return { error, isValidating, validate };
}

// Usage: Check username availability
function SignupForm() {
  const [username, setUsername] = useState('');

  const { error: usernameError, isValidating } = useAsyncValidation(
    async (value) => {
      if (!value) return 'Username is required';
      if (value.length < 3) return 'Username too short';

      // Check server
      const response = await fetch(`/api/check-username?username=${value}`);
      const data = await response.json();

      if (!data.available) {
        return 'Username already taken';
      }

      return undefined;
    },
    500 // Debounce 500ms
  );

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />

      {isValidating && <span>Checking availability...</span>}
      {usernameError && <span className="error">{usernameError}</span>}
    </div>
  );
}

# Practical Application: Complete Form Example

# Multi-Step Form with Validation

      
typescript

interface FormStep {
  id: string;
  title: string;
  fields: string[];
}

interface CompleteSignupValues {
  // Step 1: Account
  email: string;
  password: string;
  confirmPassword: string;
  // Step 2: Profile
  firstName: string;
  lastName: string;
  birthDate: string;
  // Step 3: Preferences
  newsletter: boolean;
  terms: boolean;
}

function MultiStepSignupForm() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps: FormStep[] = [
    { id: 'account', title: 'Account', fields: ['email', 'password', 'confirmPassword'] },
    { id: 'profile', title: 'Profile', fields: ['firstName', 'lastName', 'birthDate'] },
    { id: 'preferences', title: 'Preferences', fields: ['newsletter', 'terms'] },
  ];

  const form = useForm<CompleteSignupValues>({
    initialValues: {
      email: '',
      password: '',
      confirmPassword: '',
      firstName: '',
      lastName: '',
      birthDate: '',
      newsletter: false,
      terms: false,
    },

    validate: (values) => {
      const errors: FieldError = {};

      // Account validation
      if (!values.email) errors.email = 'Required';
      else if (!values.email.includes('@')) errors.email = 'Invalid email';

      if (!values.password) errors.password = 'Required';
      else if (values.password.length < 8) errors.password = 'Too short';

      if (values.password !== values.confirmPassword) {
        errors.confirmPassword = 'Passwords do not match';
      }

      // Profile validation
      if (!values.firstName) errors.firstName = 'Required';
      if (!values.lastName) errors.lastName = 'Required';
      if (!values.birthDate) errors.birthDate = 'Required';

      // Preferences validation
      if (!values.terms) errors.terms = 'You must agree to terms';

      return errors;
    },

    onSubmit: async (values) => {
      await fetch('/api/signup', {
        method: 'POST',
        body: JSON.stringify(values),
      });
    },
  });

  const currentStepData = steps[currentStep];
  const stepErrors = currentStepData.fields.filter(
    field => form.errors[field as keyof CompleteSignupValues]
  );

  const canProceed = stepErrors.length === 0;

  return (
    <form onSubmit={form.handleSubmit}>
      <h2>{currentStepData.title}</h2>

      {currentStep === 0 && (
        <>
          <input
            type="email"
            placeholder="Email"
            {...form.getFieldProps('email')}
          />
          {form.touched.email && form.errors.email && (
            <span className="error">{form.errors.email}</span>
          )}

          <input
            type="password"
            placeholder="Password"
            {...form.getFieldProps('password')}
          />
          {form.touched.password && form.errors.password && (
            <span className="error">{form.errors.password}</span>
          )}

          <input
            type="password"
            placeholder="Confirm Password"
            {...form.getFieldProps('confirmPassword')}
          />
          {form.touched.confirmPassword && form.errors.confirmPassword && (
            <span className="error">{form.errors.confirmPassword}</span>
          )}
        </>
      )}

      {currentStep === 1 && (
        <>
          <input
            type="text"
            placeholder="First Name"
            {...form.getFieldProps('firstName')}
          />
          <input
            type="text"
            placeholder="Last Name"
            {...form.getFieldProps('lastName')}
          />
          <input
            type="date"
            {...form.getFieldProps('birthDate')}
          />
        </>
      )}

      {currentStep === 2 && (
        <>
          <label>
            <input
              type="checkbox"
              checked={form.values.newsletter}
              onChange={(e) => form.setFieldValue('newsletter', e.target.checked)}
            />
            Subscribe to newsletter
          </label>

          <label>
            <input
              type="checkbox"
              checked={form.values.terms}
              onChange={(e) => form.setFieldValue('terms', e.target.checked)}
            />
            I agree to the terms and conditions
          </label>
          {form.touched.terms && form.errors.terms && (
            <span className="error">{form.errors.terms}</span>
          )}
        </>
      )}

      <div className="buttons">
        <button
          type="button"
          onClick={() => setCurrentStep(prev => Math.max(0, prev - 1))}
          disabled={currentStep === 0}
        >
          Previous
        </button>

        {currentStep < steps.length - 1 ? (
          <button
            type="button"
            onClick={() => {
              // Mark all current step fields as touched
              currentStepData.fields.forEach(field => {
                form.setFieldTouched(field as keyof CompleteSignupValues);
              });

              // Proceed if no errors
              if (canProceed) {
                setCurrentStep(prev => prev + 1);
              }
            }}
            disabled={!canProceed}
          >
            Next
          </button>
        ) : (
          <button type="submit" disabled={form.isSubmitting}>
            {form.isSubmitting ? 'Submitting...' : 'Submit'}
          </button>
        )}
      </div>
    </form>
  );
}

# Performance Optimization

# Memoize Validation Function

      
typescript

export function useFormOptimized<T extends Record<string, any>>(
  options: UseFormOptions<T>
) {
  const { validate, ...rest } = options;

  // Memoize validation to prevent unnecessary re-validations
  const memoizedValidate = useCallback(
    validate,
    [JSON.stringify(validate?.toString())] // Rough memoization
  );

  return useForm({ ...rest, validate: memoizedValidate });
}

# Debounce Async Validation

      
typescript

export function useAsyncValidationDebounced<T>(
  validator: (value: T) => Promise<string | undefined>,
  debounceMs: number = 500
) {
  const [error, setError] = useState<string | undefined>();
  const [isValidating, setIsValidating] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout>();
  const abortControllerRef = useRef<AbortController>();

  const validate = useCallback(
    async (value: T) => {
      setIsValidating(true);

      // Cancel previous request
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }

      abortControllerRef.current = new AbortController();

      // Clear previous timeout
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }

      timeoutRef.current = setTimeout(async () => {
        try {
          const validationError = await validator(value);
          setError(validationError);
        } catch (err) {
          if (!(err instanceof Error && err.name === 'AbortError')) {
            setError('Validation failed');
          }
        } finally {
          setIsValidating(false);
        }
      }, debounceMs);
    },
    [validator, debounceMs]
  );

  useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      if (abortControllerRef.current) abortControllerRef.current.abort();
    };
  }, []);

  return { error, isValidating, validate };
}

# FAQ

# Q: Should I validate on blur, change, or submit?

A: Best practice combines all three:

Blur: Show errors after user leaves field (reduces noise while typing)
Change: Real-time validation for async operations (username availability)
Submit: Full form validation before submitting

The useForm hook above uses blur + change: validates on change but only shows errors after touch.

# Q: How do I validate dependent fields?

A: Include all dependent fields in the validation function:

      
typescript

validate: (values) => {
  if (values.password !== values.confirmPassword) {
    errors.confirmPassword = 'Passwords do not match';
  }
  return errors;
}

Both fields will re-validate whenever either changes.

# Q: How do I handle server-side validation errors?

A: Map server errors to form state:

      
typescript

onSubmit: async (values) => {
  try {
    await fetch('/api/signup', {
      method: 'POST',
      body: JSON.stringify(values),
    });
  } catch (error) {
    // Map server errors to field errors
    if (error.code === 'EMAIL_EXISTS') {
      form.setFieldError('email', 'Email already registered');
    }
  }
}

# Q: How do I validate async without blocking submission?

A: Separate async validation from form submission:

      
typescript

const { error: usernameError } = useAsyncValidation(checkUsername);

// User can still submit even if async validation is pending
const canSubmit = !usernameError && !form.errors.username;

# Q: How do I test form validation?

A: Test the validation function separately:

      
typescript

test('validates email correctly', () => {
  const result = validate({ email: 'invalid' });
  expect(result.email).toBe('Invalid email');
});

# Common Patterns

Pattern 1: Form with Auto-Save

      
typescript

export function useFormWithAutoSave<T>(
  options: UseFormOptions<T> & { autoSaveDelay?: number }
) {
  const { autoSaveDelay = 2000, ...baseOptions } = options;
  const form = useForm(baseOptions);
  const timeoutRef = useRef<NodeJS.Timeout>();

  useEffect(() => {
    if (!form.isDirty) return;

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(() => {
      form.handleSubmit({ preventDefault: () => {} } as any);
    }, autoSaveDelay);

    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, [form.isDirty, form.values]);

  return form;
}

Pattern 2: Conditional Field Validation

      
typescript

interface AdaptiveValidationOptions<T> {
  baseValidate: (values: T) => FieldError;
  conditionalValidate?: (values: T, field: keyof T) => string | undefined;
}

export function useAdaptiveValidation<T>(
  options: AdaptiveValidationOptions<T>
) {
  return (values: T) => {
    const errors = options.baseValidate(values);
    // Additional conditional logic
    return errors;
  };
}

# Next Steps

The form validation patterns shown here scale from simple to complex:

Start with basic useForm for single-step forms
Add schema validation with Zod/Yup for safety
Implement async validation for server checks
Use multi-step patterns for wizard-like flows

At ByteDance and Alibaba scale, form validation becomes critical infrastructure—handling thousands of concurrent validations, debouncing efficiently, managing server round-trips. Master these patterns and you can build forms that scale.

What form validation patterns do you use? Share your implementations in the comments—dependent fields, server validation, and complex form flows always make for interesting discussions about building maintainable form logic.

Table of Contents