In React, controlled components are form elements whose values are controlled by React state, while uncontrolled components store their own state internally and are accessed using refs.
| Feature | Controlled Component 🎮 | Uncontrolled Component 🔓 |
|---|---|---|
| Data Control | React state controls the input value | DOM handles the input value internally |
| Access Value | Via state (useState) | Via ref (React reference) |
| Validation | Easy to validate during input (onChange) | Validation happens on form submit or blur |
| Code Complexity | More boilerplate but better control | Less code but harder to manage in complex forms |
| Recommended Use | Preferred in React apps | Suitable for quick forms or simple inputs |