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

• Controlled components notify other components about changes using callbacks. For example: <Button onClick={() => console.log("clicked")}>Click</Button>.
• Uncontrolled components dont notify other components about their changes and you can access component only using ref-s. Ref might be useful if you need to access real dom of HTML element

Answer 2

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 3

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.