Text inputs are manipulated multiple times (and unnecessarily) in the DOM

[tbroadley]

Steps to reproduce:

I created a JS Bin to reproduce the problem.

http://jsbin.com/qegiwuzara/edit?html,js,console,output

1. Type Perf.start() into the console (third pane from the left).
2. Edit the contents of one of the text inputs in the rightmost pane.
3. Type Perf.stop() and Perf.printDOM() into the console.

This should show that the value attribute of the edited text input was updated three times in the DOM, and the unedited text input was also updated once.

I tested the same code with 0.13.1. According to React.addons.Perf, only the modified input was updated in the DOM, and it was only updated once.

[syranide]

I'm seeing the same thing. Interesting.

cc @spicyj Could something have changed with the unwrapping of the special DOM components?

[sophiebits]

Ah, yes. Before, we were enqueueing a force update of the component which wouldn't run twice if it had already updated; now we call ReactDOMInput.updateWrapper directly in forceUpdateIfMounted so it can happen twice. Not sure the simplest fix. At least this shouldn't make a practical difference…

[tbroadley]

The updates to the unedited <input> elements can impact performance. JS Bin (same steps as before)

Perhaps you shouldn't have this many <input> elements in an application, but it's an issue I ran into.

Interestingly, the above example is slower in 0.13.1, even though 0.13.1 Perf only shows one DOM update.

[sophiebits]

Not sure if I'm doing something wrong, but that example is perfectly responsive for me.

[tbroadley]

Huh - could it be a browser specific issue? I believe I'm using Firefox 41.0.2. Seeing render times of ~140ms on every keystroke.

[tbroadley]

It looks like this was introduced here. The call to ReactDOMInput.updateWrapper seems to be the cause of the spurious DOM manipulations.

Only <input> and <textarea> components call their updateWrapper methods in this part of the code. @spicyj, do you have any idea why that is, or if it can be removed?

[karczk]

I also came across on this behavior while testing my app with Perf tools (0.14.2, 0.14.3). React updates text inputs (type "update attribute") on every refresh despite the fact that the value has not changed. Any progress / planned changes?

[aweary]

With the current implementation, the value property on an input element is only updated if the value has changed. This goes for the other managed attributes as well. That means that ReactDOMInput.updateWrapper will not update the DOM if there are no updates to be made, so this should no longer be an issue.

Thanks!