Xin Xin -4 years ago 105
React JSX Question

What are controlled components and uncontrolled components in React?

When I read the React documentation on DOM elements. It mentions controlled components and uncontrolled components in React. What are they and how do they differ?

Answer Source

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.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download