Controlled and uncontrolled ReactJs components
Almost every ReactJS tutorial or even the official documentation recommends using onChange to handle input changes. We use state for the value and change it via onChange. This causes a render on every key press. So,
- Is rendering really cheaper?
- Is there an input value in the DOM? So, there is no difference between DOM and VirtualDOM, so although the rendering doesn't change anything? (Probably wrong assumption).
Just for fun and learning, I've tried:
- Use a special function and variable to store the value, set the state after the last input not for every key press, pass this component, etc.
- Used onBlur instead of onChange.
But I don't like any of them and I want to ask this question. If the realtime change variables are not important to us, we only care about the last input, is onChange the way to go anyway?
source to share
React handles re-rendering very efficiently. It only re-displays the changes.
There are two ways to configure the inputs
First: guided input
With a controlled input, you specify the value of the input with a state variable at all (or even support in some cases). In this case, you need to call the onChange function to set the state (or prop) since the value is set to / prop and you need to change that to change the value, otherwise it will stay the same.
Example
<input value={this.state.textVal} onChange={(e) => this.setState({textVal: e.target.value}) />
The advantage of having a managed input is that you have the value available throughout your React component and you don't need the event to be fired on the input or DOM access to get the value.
Second: unsupervised entry
In this case, you do not need an onChange handler to receive the input, since you are not specifying a custom value for the input. Input value can be fetched by accessing dom or from event object
Example:
<input type="text" onBlur={(e) => {console.log(e.target.value)}/>
Another way to get the input value would be to access the DOM, which we use with refs as this.inputVal.value
See this answer on how to use ref:
Regarding your question regarding React virtualDOM
The virtual DOM is used for efficient DOM re-rendering. It doesn't involve dirty checking your data. You can re-render with virtual DOM with or without dirty validation. There is some overhead when calculating the difference between two virtual trees, but the virtual difference of the DOM is understanding the need to update the DOM, not change your data.
The virtual tree is re-displayed only when the state changes. Thus, using an observable to check if the state has changed is an effective way to prevent unnecessary re-renders, which can cause a lot of unnecessary differences in trees.
source to share
For me, the main reason for using controlled components, besides real-time verification, is the principle of "One Source of Truth".
In the case of an uncontrolled component, the input value can be different between the form input and the value used in the React component. You can get a new value onBlur
, but there are ways to change the value in the DOM without emitting that event, in which case the value the user sees and the one you are working on may be different, resulting in a different result from the expected user.
This might not be a big problem, but since React preaches this principle a lot (for example, not storing values in a state that can be retrieved from other states), I would just do it for the sake of consistency.
Plus, you don't have to worry about the cost of re-rendering on every input.
source to share