Controlled vs Uncontrolled Components in React: When to Use Each

Controlled vs Uncontrolled Components in React: When to Use Each

Form inputs in React come in two flavors: controlled and uncontrolled. The difference confuses beginners. Here is what each is and when to use it.

Controlled Components

A controlled input has its value driven by React state. The state is the single source of truth, and every change updates the state, which updates the input. React controls the input.

Uncontrolled Components

An uncontrolled input manages its own state in the DOM, like a traditional HTML input. You read its value with a ref when you need it, instead of on every change.

The Key Difference

In a controlled component, React is the source of truth. In an uncontrolled one, the DOM is. Controlled gives you full control and real-time validation; uncontrolled is simpler and less code for cases where you do not need that.

When to Use Controlled

Use controlled for almost everything: forms that need validation, inputs that affect other UI, search boxes that filter live, and any case where you need the value as the user types.

When to Use Uncontrolled

Use uncontrolled for simple one-time reads, like a single submit form where you only need the value on submit, or for integrating with non-React code that needs direct DOM access.

The React Preference

The React team recommends controlled components for most cases, because they keep React as the single source of truth and make the UI predictable.

The Common Mistake

Mixing both: setting a value without an onChange handler makes a read-only input that warns. If you set value, you must handle onChange; otherwise use defaultValue for an uncontrolled input.

The Takeaway

Controlled inputs are driven by React state; uncontrolled inputs live in the DOM and are read with refs. Use controlled for validation and live updates, uncontrolled for simple one-time reads. The React preference is controlled.