Controlled Components

Introduction

In the previous lesson you saw that React supports two philosophies for handling form inputs. This lesson goes deep on the first one: controlled components, the approach most React applications reach for by default. In a controlled component, React state — not the DOM — decides exactly what appears inside an input at every moment.

You will learn why state is described as the "single source of truth" for a controlled input, the value + onChange pattern that makes it work, why every keystroke causes a re-render, and how to scale this pattern up to handle multiple fields with a single state object using computed property names.

State as the Single Source of Truth

Normally, an HTML input manages its own value internally — you type, and the browser updates what you see, entirely on its own. A controlled component turns that relationship around: the input's value is set directly from a React state variable, and the only way to change what is displayed is to update that state.

This means React state becomes the single source of truth: at any given moment, the input on screen simply reflects whatever the state currently holds. There is no separate, hidden copy of the value living inside the DOM that you need to keep in sync — state is the only place the data actually lives.

The value + onChange Pattern

To make an input controlled, you give it two props: value, set to a piece of state, and onChange, a handler that updates that state whenever the user types. Together they form a loop — state sets what is shown, and typing feeds back into state.

import { useState } from "react";

function ControlledInput() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>You typed: {name}</p>
    </div>
  );
}

[ Sam ]
You typed: Sam

Why Every Keystroke Re-Renders

Because setName(...) is called on every single keystroke, the component re-renders every single keystroke too. This can sound wasteful at first, but it is exactly what makes controlled inputs so useful: on every render, you have instant, up-to-the-character access to the current value, which is what makes live validation, character counters, and conditional UI straightforward to build.

import { useState } from "react";

function LiveCharacterCount() {
  const [bio, setBio] = useState("");

  return (
    <div>
      <textarea
        value={bio}
        onChange={(e) => setBio(e.target.value)}
        maxLength={140}
      />
      <p>{bio.length}/140 characters</p>
    </div>
  );
}

[textarea with typed content]
23/140 characters

Managing Multiple Fields with One State Object

A real form usually has several fields — name, email, password, and so on. Instead of calling useState separately for every single field, a common pattern is to store all of them together in one state object, and write a single handleChange function that updates just the field that changed.

The key trick is giving each input a name attribute that matches a key in the state object, then using a computed property name — [event.target.name] — to update only that one property while spreading the rest of the previous state unchanged.

import { useState } from "react";

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

  function handleChange(event) {
    const { name, value } = event.target;

    setFormData((prev) => ({
      ...prev,
      [name]: value, // computed property name updates just this field
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        id="name"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />

      <label htmlFor="email">Email</label>
      <input
        type="email"
        id="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />

      <button type="submit">Sign Up</button>
    </form>
  );
}

{ name: "Aria", email: "aria@mail.com" }

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Controlled components put React state firmly in charge of every form input, using the simple but powerful value + onChange pattern. Scaling this up to a whole form is just a matter of storing all the fields in one state object and using computed property names to update exactly the field that changed.

In this lesson, you learned why controlled inputs treat state as the single source of truth, how the value + onChange loop works, why re-rendering on every keystroke is expected and fine, and how to manage several fields with one state object. Next, you will learn the alternative approach: uncontrolled components, where the DOM manages input values instead of React.