Controlled vs uncontrolled components in React

Question

Almost in every ReactJS tutorial or even in the official documentation for handling input changes, onChange is recommended. We use a state for the value and change it via onChange. This triggers the render in every key stroke. So,

1. Is rendering really that cheap?
2. Is input value not being held in DOM? So there is no difference between the DOM and VirtualDOM, so although the rendering happens nothing changes? (Wrong assumption probably).

Just for fun and learning purposes I tried those:

1. Used a custom function and variable to hold the value, set the state after last input not for in every keystroke, passed that value related component etc.
2. Used onBlur instead of onChange.

But, I don't like either of them and want to ask this question. If live input value changes is not important for us, we only care for the last input, still onChange is the way to go?

Answer 1

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.

Answer 2

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.