In a React form, controlled components use React state to manage data, while non-controlled components rely on DOM to process data. 1. The controlled component controls the input value through the state. Each user input will trigger the event update status and can verify or format the data in real time; 2. The uncontrolled component uses ref to obtain the DOM value, which is suitable for obtaining data only when submitting or integrating with third-party libraries; 3. The selection is based on whether the form data needs to be fine-grained and real-time interaction.

In React forms, the difference between controlled and uncontrolled components come down to how form data is handled. Controlled components use React state to manage and update input values, while uncontrolled components rely on the DOM itself to handle the data.

What Are Controlled Components?

Controlled components are those where form data is managed by React's state. Every time a user types into an input field, the component updates the state via an event handler, and the input value is tied directly to that state.

This gives you more control over the form data — you can validate inputs as they type, format values ??on the fly, or even reset fields programmatically.

For example:

• You have an <input> field for a username.
• That input's value is set to a state variable like username .
• The onChange handler updates that state every time the user types.

Here's what it looks like in code:

 function UsernameForm() {
  const [username, setUsername] = useState('');

  function handleChange(e) {
    setUsername(e.target.value);
  }

  Return (
    <form>
      <input
        type="text"
        value={username}
        onChange={handleChange}
      />
    </form>
  );
}

Key points:

• The input value always reflects the current state.
• You can manipulate or validate the value before updating the state.
• This pattern works well with form validation libraries or when you need real-time feedback.

What Are Uncontrolled Components?

Uncontrolled components, on the other hand, let the DOM handle the form data. Instead of setting the value through state, you retrieve it when needed — typically using a ref.

They're useful if you want a quick-and-dirty form without managing every change in state. They also feel closer to traditional HTML forms.

To get the value from an uncontrolled input, you'd typically use a ref , like this:

 function UsernameForm() {
  const inputRef = useRef();

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

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

You might see these used in cases where:

• You don't need to track every keystroke.
• You're integrating with non-React code or third-party libraries.
• Performance isn't a concern and you just want something simple.

One thing to note: default values ??can be set with the defaultValue prop instead of value .

When to Use Each Type

Choosing between controlled and uncontrolled depends on your needs:

Use controlled components when:

• You need to validate or format input as the user types.
• You want to enable/disable buttons based on input state.
• You're building reusable form components or using form state across multiple parts of your app.

Use uncontrolled components when:

• You only care about the value when the form is submitted.
• You're dealing with a lot of inputs and tracking each one in state feels heavy.
• You're migrating old code or working with external libraries that expect direct DOM access.

There's no strict rule here — sometimes mixing both in different parts of the same form makes sense.

Ultimately, the choice depends on how much control you need over the form data. Controlled components give you more flexibility, while uncontrolled ones are simpler and less state-heavy. Both have their place depending on the situation.

Basically that's it.

The above is the detailed content of What are controlled and uncontrolled components in React forms?. For more information, please follow other related articles on the PHP Chinese website!