What are React controlled components and uncontrolled components?

Question

What are controlled components and uncontrolled components in ReactJS? How do they differ from each other?

Answer 1

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.

Answer 2

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} />;
}

Answer 3

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.

Answer 4

Controlled component: Form data are handled by a React component.

The flow of a Controlled Component in ReactJS image

Uncontrolled components: form data are handled by the DOM itself.

The flow of an Uncontrolled Component in ReactJS image

Answer 5

Controlled components do not hold their state.

Data they need is passed down to them from a parent component.

They interact with this data by callback functions, which are also passed from the parent to the child.

Answer 6

TLDR;

https://www.youtube.com/watch?v=6L2Rd116EvY You can check that page out he explains it finely.......

Controlled Components

Without complex words, Controlled components are components rendering form elements such as <input/> whose value is controlled by react and react alone, For example copy the code below and try to change the input field within the DOM...

export default function Component() {

  return (
        <div>
            <input type="text" value="somevalue" />
            
          </div>
)
}

No matter how much you try to update the value of the input above, react won't let you. Because Reacts wants to be the one in control of the updated value using states hence the title controlled...

It's value can be updated by connecting the attributes onChange and value to a state as shown below, Try it out.

function Component() {

  const [text,setText] = React.useState("")

  return (
          <div>

            <input type="text" onChange={(e)=>setText(e.target.value)} value={text} />

            <p>{text}</p> 
          </div>
  )
}

Now our input can be updated and its value, used either to render something or perform instant validation....

Uncontrolled Components

Uncontrolled components are components that render form elements such as <input/> whose value can be handled by the Dom element and one major difference between controlled and uncontrolled is the value attribute definition. for uncontrolled, we have a defaultValue instead or no value at all sometimes..

function Component() {

  return (
         <div>

            <input type="email" id="message" defaultValue="example@mail.com" />
            
          </div>
  )
}

The value of the input above can be changed and is controlled by the DOM without React...

Its advice to use the Controlled Components more in react as you can perform instant validation and enforce dynamic inputs.

Answer 7

A controlled component is a preferred way to do things in React.

It allows us to keep all component states in the React state, instead of relying on the DOM to retrieve the element's value through its internal state.

A controlled component is a component that derives its input values from the state.

Answer 8

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}/>

Answer 9

According to docs:

In a controlled component, form data is handled by a React component.

The alternative is uncontrolled components, where form data is handled by the DOM itself.