Controlled Components in React

A controlled component gets its form value from React state, and user input updates that state through an event handler. React state is therefore the source of truth for the displayed value.

For a controlled text input, pass the current state as `value` and update that state in `onChange`. When the user types, the handler reads the new value and calls the state setter; React then renders the input with that value.

Use `checked` rather than `value` to control a checkbox. A `<select>` can also be controlled with `value`, with its change handler updating state. In each case, the state should represent what the control currently displays.

Controlled inputs are useful when the UI must respond immediately to edits, such as showing validation feedback, enabling a button conditionally, or keeping multiple parts of the UI in sync. They also make the current form values available to the component without first reading them from the DOM.

An input with a `value` prop but no working change handler will not behave like an editable controlled input. For an input that should keep its own value in the DOM, use an uncontrolled approach such as `defaultValue` instead.

Key points

• React state supplies the control's current value.
• An `onChange` handler updates state in response to user input.
• Use `checked` to control a checkbox; use `value` for text inputs and selects.
• Controlled inputs make current form data available to React during interaction.
• Use `defaultValue` or `defaultChecked` when the DOM should manage the value.

Interview questions

What makes an input a controlled component in React?

Its current value is provided by React, usually from component state. The component also handles changes and updates that state. For a text input, this commonly means passing `value` and an `onChange` handler. The input then reflects the state on each render.

How do you implement a controlled text input?

Create state for the input value and pass that state to the input's `value` prop. In `onChange`, read `event.target.value` and pass it to the state setter. React rerenders with the updated value. This keeps the rendered input synchronized with component state.

How does a controlled checkbox differ from a controlled text input?

A controlled checkbox uses the `checked` prop to represent whether it is selected. Its change handler should read `event.target.checked`, which is a boolean. A text input typically uses `value` and reads `event.target.value`. Using the wrong prop can prevent the control from reflecting state as intended.

When would you choose a controlled input over an uncontrolled one?

Choose a controlled input when React needs to use the current value as the user edits it. Examples include live validation, conditionally enabling a submit button, or keeping related UI in sync. Choose an uncontrolled input when the DOM can own the value and React only needs to read it occasionally, for example through a ref. The choice depends on who should manage the current value.

What does it mean if an input changes from uncontrolled to controlled?

It means the input was rendered without a controlled value at first and later received one, or the reverse. React expects the control to stay consistently controlled or uncontrolled during its lifetime, and switching modes can produce a warning. One common cause is state that begins as `undefined` and later becomes a string. Initialize the state to a suitable value, such as an empty string for a text input.