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?
This relates to stateful DOM components (form elements) and the React docs explain the difference:
propsand 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".
refto 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.