7

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?

devserkan
  • 16,870
  • 4
  • 31
  • 47

2 Answers2

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

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • I missed the uncontrolled part in the documentation, thank you for pointing that out.With ref this is very easy as I see.But, after your answer and @squegeim's explanation about "Single Source of Truth" I see that onChange is the way to go. One last thing, since I am a learner, can you show me a "documentation" about using an observable about this subject please? – devserkan Jun 10 '17 at 09:20
  • I was going to accept it of course. By saying observable you mean uncontrolled components? – devserkan Jun 10 '17 at 09:29
  • no you should go with controlled components, there is a link the same documentation for controlled components. – Shubham Khatri Jun 10 '17 at 09:31
  • I'm already using controlled components right now, I just asked the question to understand better. I just did not understand the part "use observables..." in your answer. – devserkan Jun 10 '17 at 09:34
  • If you meant about virtual tree, it says about the dirty checking that is done to prevent rerender – Shubham Khatri Jun 10 '17 at 09:35
  • No Problem :), glad to have helped – Shubham Khatri Jun 10 '17 at 09:37
  • But if you are using a controlled component form, doesn't it need to re-render everytime a character is entered ? Isn't there any better way, like storing the input value in any class variable instead of the `state` ? – Dane Oct 31 '17 at 11:08
1

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.

squgeim
  • 2,321
  • 1
  • 14
  • 21
  • Thank you for reminding me the Single Source of Truth.I should really remember that very often in my way to become a developer :) For a very very big application, still re-rendering is not a problem? Or developers solve this issue with some other stuff? Like @Shubham Khatri's observable suggestion, or in the lifecycle in React, or some other way? – devserkan Jun 10 '17 at 09:25