Form Handling in React

Overview

Form handling is a core part of building interactive web applications. In React, it involves managing user input, validating data, and handling form submission in a controlled or uncontrolled way.

Controlled vs. Uncontrolled Components

Type	Controlled Component	Uncontrolled Component
Definition	React controls the input via state	DOM holds the value, accessed using ref
Data source	useState	Direct DOM access via useRef
Suitable for	Dynamic logic, validation	Simple forms (e.g., file upload)
Re-render on change	✅ Yes	❌ No
Common use case	Most forms	When you want to avoid state for performance

Controlled Component Example

function ControlledForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Key Point:

• Controlled components are bound to React state.
• Each input change triggers a re-render, which gives better control and validation logic.

Uncontrolled Component Example

function UncontrolledForm() {
  const nameRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${nameRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Key Point:

• Uncontrolled components don’t use React state.
• They are useful for simple forms or performance-sensitive inputs.

Manual Validation Example

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const validate = () => {
    if (!email.includes('@')) {
      setError('Invalid email address');
      return false;
    }
    setError('');
    return true;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      alert('Form submitted!');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      {error && <span style={{ color: 'red' }}>{error}</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

Key Point:

• Manual validation allows flexibility.
• You must handle error messages and rules explicitly.

Popular Form Libraries

Library	Features	When to Use
React Hook Form	Lightweight, fast, integrates with ref	Complex forms with minimal re-renders
Formik	Declarative, handles forms + validation + touched states	Dynamic or multi-step forms
Yup	Schema-based validation, works well with Formik/RHF	Centralized validation logic

React Hook Form Example

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

function RHFForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      <input type="submit" />
    </form>
  );
}

Key Point:

• Inputs are registered via the register() method.
• You don’t need to handle state or onChange manually.

Formik + Yup Validation Example

import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email').required('Required'),
});

function FormikForm() {
  const formik = useFormik({
    initialValues: { email: '' },
    validationSchema,
    onSubmit: (values) => console.log(values),
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input 
        name="email" 
        value={formik.values.email}
        onChange={formik.handleChange}
      />
      {formik.errors.email && <div>{formik.errors.email}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

Key Takeaways

Best Practices	Notes
Use controlled components	They provide better control over form state and validation
Use e.preventDefault()	Prevent default browser behavior during form submission
Use useRef only when necessary	Ideal for file inputs or when avoiding re-renders
Prefer libraries for complex forms	RHF and Formik improve scalability and developer productivity
Use Yup for reusable validation	Centralize and reuse validation logic across forms