javascript - Controlled vs uncontrolled components in React - Stack Overflow

admin管理员组

文章数量:1400047

Almost in every ReactJS tutorial or even in the official documentation for handling input changes, onChange is remended. 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 ponent 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?

Almost in every ReactJS tutorial or even in the official documentation for handling input changes, onChange is remended. 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 ponent 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?

• javascript
• reactjs

Share Improve this question Follow edited Dec 12, 2020 at 19:34 devserkan asked Jun 10, 2017 at 8:48 devserkandevserkan 17.7k44 gold badges3333 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 ponent 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 puting 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 ponents, aside from real time validation, is the principle of "Single Source of Truth."

In the case of an uncontrolled ponent, the value of the input may be different between the form input and the one used in your React ponent. 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.

本文标签： javascriptControlled vs uncontrolled components in ReactStack Overflow