What are 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 applies to stateful DOM components (form elements), and React docs explain the difference:

• A controlled component is one that takes the current value through props and notifies changes through callbacks such as onChange . The parent component “controls” it by processing the callback and managing its own state and passing the new values ​​as the details of the controlled component. You can also call it the "dumb component."
• A Unsupervised component is one that stores its own internal state, and you query the DOM with ref to find its current value when you need it. This is a bit more like traditional HTML.

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