What are React controlled components and uncontrolled components?

Question

This relates to stateful DOM components (form elements) and the React docs explain the difference:

• A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".
• A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Most native React form components support both controlled and uncontrolled usage:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

In most (or all) cases you should use controlled components.

They both render form elements

Uncontrolled component and Controlled component are terms used to describe React components that render HTML form elements. Every time you create a React component that renders an HTML form element, you are creating one of those two.

Uncontrolled components and Controlled components differ in the way they access the data from the form elements (<input>, <textarea>, <select>).

Uncontrolled Components

An uncontrolled component is a component that renders form elements, where the form element's data is handled by the DOM (default DOM behavior). To access the input's DOM node and extract its value you can use a ref.

Example - Uncontrolled component:

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

Controlled Components

A controlled component is a component that renders form elements and controls them by keeping the form data in the component's state.

In a controlled component, the form element's data is handled by the React component (not DOM) and kept in the component's state. A controlled component basically overrides the default behavior of the HTML form elements.

We create a controlled component by connecting the form element (<input>, <textarea> or <select>) to the state by setting its attribute value and the event onChange.

Example - Controlled Component:

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


  return <input type="text" value={email} onChange={handleInput} />;
}

Controlled component is component that get the changed value from the callback function and uncontrolled component is component that have the one from the DOM. For example, When input value is changed,we can use onChange function in Controlled Component and also we can get the value using DOM like ref.

Controlled components are mainly those where any prop value of the component is either from the parent component or from the store (as in case of redux). Example:

<ControlledComp value={this.props.fromParent}/>

In case of an uncontrolled component, the component value can be taken from the state of the component depending on the event handling. Example:

<UncontrolledComp value={this.state.independentValue}/>