Controlled Components in React

When building interactive applications, forms are essential for capturing user data. However, relying on direct DOM manipulation to manage inputs often leads to unpredictable results and scattered logic. React introduces a more reliable pattern called controlled components — where every input field’s value is derived from the component’s state. This approach makes form data predictable, easier to debug, and fully aligned with React’s declarative model.

In a controlled form, React takes full control of the input’s value. The input element reflects state, and every change updates that state through event handlers. This two-way synchronization ensures that the UI always mirrors the underlying data, creating a single, consistent source of truth.

Understanding controlled components

A controlled component is a form input element — such as an <input>, <textarea>, or <select> — whose value is controlled by React state.

That means the input’s value is determined by the state variable, and any user interaction triggers a function that updates that state.

This makes the form’s data flow predictable:

1. The component renders the input using the current state value.

2. The user types into the field.

3. An onChange handler updates the state.

4. The updated state triggers a re-render.

5. The input’s value prop reflects the new state.

• The DOM never “owns” the data — React does.

• In React, inputs become controlled components when their value is tied to state. Without an onChange handler to update that state, the input appears editable but won’t actually change — it remains read-only. Always pair a controlled input’s value with an onChange handler to keep the UI and state in sync.

Example: A simple controlled input

The example below demonstrates React’s controlled input. The value prop binds the input field to component state, making React the single source of truth for form data.