midReact Hooks
What is the difference between controlled and uncontrolled components?
Updated May 6, 2026
Short answer
Controlled components rely on React state; uncontrolled use DOM state.
Deep explanation
Controlled gives full control to React, uncontrolled uses refs to access values.
Real-world example
File inputs often use uncontrolled approach.
Common mistakes
- Mixing both patterns incorrectly.
Follow-up questions
- Which is preferred?
- Can both be mixed?