Controlled vs Uncontrolled Components in React: Explained Simply

Every React developer encounters the challenge of managing user input. Some form fields need to be tamed with precise React state—others can be left to roam free in the DOM. That’s where the concepts of controlled and uncontrolled components come in. 

Think of controlled components as disciplined performers on a script: their every move is dictated by React’s state. Uncontrolled components, on the other hand, are more like improvisers, letting the browser handle their behaviour until you check in on them with a ref. 

This post unpacks how both styles work, why they matter, and how you can pick the right approach for every form in your app.

What are Controlled and Uncontrolled Components?

Controlled Component: A controlled component is an input element whose value is managed by React state. Whenever the input changes, React gets notified through an event like onChange, and you update the state accordingly.

Here, any change to the input updates React’s state, and React reflects that state back into the input.

Uncontrolled Component: An uncontrolled component keeps its own state in the DOM. Instead of relying on React state, you use a ref to get the value when needed.

Here, the input manages itself until you “reach in” and grab the value using a ref.

Controlled vs Uncontrolled: Key Differences

Controlled Component

Uncontrolled Component

React state stores current value

DOM stores current value

Requires onChange handler

Uses refs to access value

Data is always in sync with React state

Data accessed only when needed

Easy to validate on each keystroke

Validation only after submission

Best for complex forms

Good for simple, static forms

When Should You Use Each?

1- Use controlled components for:

• Real-time validation, formatting, or state updates.
• When you need to react to every change as it happens.
• Large, dynamic or multi-step forms.

2- Use uncontrolled components for:

• Quick, simple forms.
• Integrating with non-React libraries that manipulate the DOM.
• When you want performance benefits for very large forms.

Form Validation: Controlled vs Uncontrolled

With controlled components, validation is straightforward:

React can check validity instantly, on every input change.

With uncontrolled components, you validate only on submission:

Validation happens when you access the value using the ref.

Using React refs for Uncontrolled Components

Refs (useRef or createRef) allow direct access to the input’s value in the DOM:

This is common for uncontrolled components—great for quick and direct access.

defaultValue vs value: The Gotcha

defaultValue is for uncontrolled components—sets the initial value only, and React does not update it after.

value is for controlled components—input value reflects React state strictly.

Never mix both! You’ll see warnings if you switch from uncontrolled to controlled mode, or vice versa.

Migrating from Uncontrolled to Controlled

To migrate, move your value from refs into state:

Now, React and your code have full control and predictability.

Building Reusable Components (Support Both Modes)

You can design components that support both controlled and uncontrolled use cases:

If value is provided, act as controlled; if only defaultValue, act as uncontrolled.

Best Practices

• Always pick one mode: controlled or uncontrolled, and stick to it for a component’s lifecycle.
• Initialise controlled values with an empty string (useState("")) to avoid React warnings.
• Do not mix defaultValue and value on the same input.
• For reusable form components, document their usage clearly to prevent developer confusion.

Summary

Mastering controlled and uncontrolled components puts you in control of how users interact with your forms. Controlled components let you monitor and validate every keystroke with React state, ensuring your UI and data are always in sync. Uncontrolled components, by contrast, offer simplicity and speed for basic forms by letting the DOM handle the heavy lifting. 

By understanding their differences, best practices, and the common “gotchas” around default values, refs, and conversion, you can build React forms that are both robust and developer-friendly—no matter how complex your requirements grow.