What are the differences between uncontrolled and controlled components and when should I use one over the other?
I've had a read of the documentation but can't get my head around it at all.
Thanks :)
Asked
Active
Viewed 2,484 times
1
-
Check this answer https://stackoverflow.com/questions/44471370/reactjs-controlled-vs-uncontrolled-inputs/44471458#44471458 – Shubham Khatri Dec 11 '17 at 11:10
1 Answers
3
Uncontrolled components form data is handled by the DOM itself, which is the source of truth. It then stores its own state internally and can query the DOM using a 'ref' to find current value when you need it.
Controlled - Takes it's current value through props and notifies changes through callbacks, such as OnChange. A parent component could then control the callbacks and manage its own state and pass new values as props to the controlled.
Uncontrolled components can be easier to integrate React with non-React code and is often less code if you want to get something done quick and dirty. Often you usually use controlled components. If you're finding it difficult to decide which to choose - try reacts article on controlled versus uncontrolled inputs
jsldnppl
- 915
- 1
- 9
- 28