What is Uncontrolled 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.

For the example below, this code accepts a single name in an uncontrolled component:

See the Pen RympZV by Bunlong (@Bunlong) on CodePen.

<input> query the DOM using a ref, stores the DOM in its own state this.input, and find it’s current value using this.input.value.

Since an uncontrolled component keeps the source in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components.

If it’s still not clear which type of component you should use for a particular situation, you might find this article on controlled versus uncontrolled inputs to be helpful.