Forms are a core part of most web applications. They are used for login screens, registration, feedback, search, and data entry. In React, form handling is different from plain HTML because React manages form data through JavaScript and state instead of relying on the browser’s default behavior.

In a traditional HTML form, input values are stored in the DOM and accessed only when the form is submitted. In React, form values are typically stored in component state, giving the developer full control over the input data and UI behavior.

Controlled Components

The most common and recommended way to handle forms in React is using controlled components. In this approach, the form input’s value is controlled by React state. Whenever the user types, the state updates, and React re-renders the input with the new value.

Basic example of a controlled input:

import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={e => setEmail(e.target.value)}
      placeholder="Enter email"
    />
  );
}

Here, the input value is always in sync with the component’s state.

Handling Multiple Inputs

For forms with multiple fields, it is common to store all values in a single state object.

Example:

function SignupForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: ""
  });

  function handleChange(e) {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <input name="name" onChange={handleChange} />
      <input name="email" onChange={handleChange} />
    </>
  );
}

This pattern makes form handling scalable and organized.

Handling Form Submission

In React, form submission is handled using the onSubmit event. The default browser behavior must be prevented to avoid page reloads.

Example:

function handleSubmit(e) {
  e.preventDefault();
  console.log("Form submitted");
}

This allows developers to validate data, send API requests, or update state without refreshing the page.

Uncontrolled Components

React also supports uncontrolled components, where form data is accessed using refs instead of state. This approach is less common but can be useful for simple or performance-critical cases.

Example:

function UncontrolledForm() {
  const inputRef = React.useRef();

  function handleSubmit() {
    console.log(inputRef.current.value);
  }

  return <input ref={inputRef} />;
}

Real-World Scenario

In a real-world application such as a registration or resume-building form, React forms handle live validation, conditional fields, and dynamic previews. As users type, the UI updates instantly, showing errors or formatted data without page reloads.

Important Notes and Best Practices

Always use controlled components for complex forms. Validate user input before submission. Keep form logic organized by grouping related fields. Avoid unnecessary re-renders by managing state efficiently.

In summary, forms in React provide a powerful and flexible way to manage user input. By using state, controlled components, and event handlers, developers can build reliable, interactive, and scalable form-based applications.