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:
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.