All controlled <textarea/> fields re-render on any setState() call even though their data has not changed. #12072
Description
Do you want to request a feature or report a bug?
Reporting a bug.
What is the current behavior?
Basically I have many controlled <textarea/> fields in the app that I am currently developing and I normally only want them to re-render when their values have changed through their onChange event, but they re-render every time setState() gets called anywhere within the component or any parent component.
I even tried creating a custom component which only contains a <textarea/> and setting shouldComponentUpdate() to return false but it seems to ignore that command completely. It's weird because in this case the console.log()s in my child component's render() function don't get executed but the field gets re-rendered nonetheless.
This issue is causing some major performance problems in my app. I hope someone addresses this issue as fast as possible so I can continue working on my react project. Maybe someone can provide a temporary workaround? Please let me know if there's something I'm missing or if I'm using this field incorrectly.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
I have isolated the problem in a new empty app and you can see the behavior in the following gif:
https://gfycat.com/DentalExcitableIndri
The code is very simple. You can recreate this problem by creating 2 controlled fields, one <input/> and another <textarea/>. Then go to your browser, inspect the <textarea/> element and input something in the basic input field. The <textarea/> will re-render on every new typed letter in the <input/> field but not the other way around.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
ta1 : "ta1",
ta2 : "ta2",
ta3 : "ta3",
i1 : "i1",
i2 : "i2",
i3 : "i3"
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event){
this.setState({
[event.target.name] : event.target.value
});
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
test
</p>
<div className="row">
<div className="column">
textareas
<textarea value={this.state.ta1} name="ta1" onChange={this.handleInputChange}/>
<textarea value={this.state.ta2} name="ta2" onChange={this.handleInputChange}/>
<textarea value={this.state.ta3} name="ta3" onChange={this.handleInputChange}/>
</div>
<div className="column">
input fields
<input value={this.state.i1} name="i1" onChange={this.handleInputChange}/>
<input value={this.state.i2} name="i2" onChange={this.handleInputChange}/>
<input value={this.state.i3} name="i3" onChange={this.handleInputChange}/>
</div>
</div>
</div>
);
}
}
export default App;What is the expected behavior?
The <textarea/> field should only re-render when its data is changed.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I was able to recreate this problem on React versions 16.2.0 (latest) and 15.6.1. I did not test on other versions so I am not sure if this worked correctly before. I'm using Chrome 62.0.3202.94 64-bit (latest) and Firefox 57.0.4 64-bit (latest) on Ubuntu 14.04.