What are uncontrolled components?

The Uncontrolled Components are the ones that store their 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.

In the below UserProfile component, the name input is accessed using ref.

class UserProfile extends React.Component {
constructor(props) {
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.input} />
<input type="submit" value="Submit" />

In most cases, it's recommend to use controlled components to implement forms.

March 26, 2022