Controlled components are special type of components in React where the component's state is controlled entirely by the parent component. The parent component communicates with controlled components using props.

In a controlled component, the value of an input field or the selected value of a dropdown menu is set by React state, rather than the user directly modifying the input field. Instead of reading the value directly from the DOM, the component gets the current value by accessing its state. When the user changes the value in the input field, the onChange event is fired, and a callback function defined by the parent component is invoked. This function takes the new value and uses it to update the state of the parent component, which then propagates the change back down to the controlled component, causing it to re-render with the new value.

Controlled components are useful for ensuring consistency, as it allows for greater control over what can be entered into a form than traditional HTML forms, which can be modified by a user without any restrictions. They also help to prevent unexpected side-effects that can occur when a form is modified directly by a user.

In summary, controlled components are an important concept to understand when working with React because they allow for greater consistency and control over the user input, which ultimately leads to more predictable behavior in your applications.