Your first form in React: A guide to controlled components

Managing your first form in React often feels like a rite of passage that turns into a headache. I remember my first attempt; I tried to use refs for everything because I came from a jQuery background, and I ended up with a UI that wouldn't update when the data changed. It was a mess.

If you’re just starting out, you’ll hear a lot of noise about complex libraries like React Hook Form or Formik. Ignore them for now. You need to understand the fundamentals of controlled components first. When you master how state flows through a form, you’ll be ready to handle component architecture that survives a growing team in Next.js later on.

Understanding controlled components

In a "controlled" form, React state is the single source of truth. Every keystroke updates a state variable, and that variable, in turn, dictates what the input displays.

Here is the most basic pattern you’ll use:

JSX
import { useState } from CE9178">'react';

export default function SimpleForm() {
  const [name, setName] = useState(CE9178">'');

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </form>
  );
}

See what’s happening? The value prop is tied to the name state. Whenever the user types, the onChange event fires, updates the state, and React re-renders the component to show the new value. It’s predictable and easy to debug.

Why your first form in React gets messy

The trap most juniors fall into is creating a useState hook for every single input field. If you have a login form with ten fields, you end up with ten separate state declarations. It becomes impossible to track.

Instead, group your state into a single object. This keeps your logic tight and makes it easier to pass data to an API later.

JSX
const [formData, setFormData] = useState({
  username: CE9178">'',
  email: CE9178">'',
  password: CE9178">''
});

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData((prev) => ({
    ...prev,
    [name]: value
  }));
};

Using the functional update (prev) => ({...prev}) is critical here. It ensures you’re working with the most recent state, avoiding race conditions that can happen if you update state rapidly.

The wrong turn: Validating too early

I once tried to validate every field on every keystroke. It felt "proactive," but it created a terrible user experience. The error messages popped up before the user even finished typing their email address.

Instead, validate on blur or, even better, on submit. If you're building out more complex data-fetching logic, remember that typing async code in TypeScript without fighting the compiler is essential once you start posting that form data to a backend. You don't want to be debugging type errors while you're trying to figure out why your API isn't receiving your form object.

Dealing with performance

You might worry that updating state on every keystroke will slow down your app. In 99% of cases, it won't. React is fast enough to handle standard forms. If you notice a lag, you might be accidentally re-rendering the entire page. If you're curious about how to spot these issues, profiling and fixing a slow React render: A practical guide is a great resource for identifying where the bottleneck actually lives.

Frequently Asked Questions

Do I need a library for forms? Not for simple inputs. Once you’re managing complex validation, nested arrays, or large multi-step wizards, then look at libraries like React Hook Form. Don't add a dependency until you've hit the limits of standard state.

Why does my input lose focus? If you're re-rendering the parent component and recreating the input component inside the render function, React might destroy and recreate the DOM node. Always keep your inputs as stable elements within your component.

Should I use useRef for forms? Only if you need to perform manual DOM manipulations, like setting focus on an input when a modal opens. For capturing user input, stick to useState or useReducer.

Final thoughts

Building your first form in React is all about keeping the data flow unidirectional. Keep your state object consolidated, handle your submission logic clearly, and don't over-engineer with libraries until you absolutely have to.

I still find myself reaching for complex solutions too early. The best advice I can give you is to write the simplest version first. If it works, leave it. If it becomes a maintenance nightmare, then—and only then—look for a more robust pattern. You’ll learn more from fixing a simple form that grew too large than you will from copying a complex boilerplate you don't fully understand yet.