Controlled vs uncontrolled components in React

React handles the re-rendering very efficiently.It only re-renders the changes.

There are two ways to configure the inputs

First: Controlled Input

With a controlled input, you specify the value of the input with a state variable generally(or even a prop in some cases). In this case you need to call the onChange function to set the state(or the prop) since the value is set to a state/prop and you need to change that to change the value otherwise it will remain the same.

Ex

<input value={this.state.textVal} onChange={(e) => this.setState({textVal: e.target.value}) />

The advantages of having a controlled input is that you have the value available throughout you React component and you do not need an event to be fired on input or access the DOM to get the value.

Second: Uncontrolled input

In this case you don't need an onChange handler to get the input as you don't specify a custom value for the input. The value of the input can be fetched by accessing the dom or from an event object

Ex:

<input type="text" onBlur={(e) => {console.log(e.target.value)}/>

The other way to get the input value will be by accessing the DOM which we do using refs as this.inputVal.value

See this answer on how to use ref:

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

Regarding you question on React virtualDOM

The virtual DOM is used for efficient re-rendering of the DOM. This isn't really related to dirty checking your data. You could re-render using a virtual DOM with or without dirty checking. There is some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not your data has changed.

Virtual tree is re-renderd only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs.

For me, the major reason to use controlled components, aside from real time validation, is the principle of "Single Source of Truth."

In the case of an uncontrolled component, the value of the input may be different between the form input and the one used in your React component. You may fetch the new value onBlur, but there are ways that the value in DOM can change without emitting this event, and in that case the value that the user sees and the one that you are working on may differ, resulting in a different result from what the user expects.

This may not be a huge concern, but since React preaches this principle a lot (like not keeping values in state that can be derived from other states), I'd just do it for the sake of consistency.

Besides, you do not need to worry about the cost of re-rendering on each input.