Responsive Stand-Alone Components - Performance and PureRender

Question

Everyone says it uses components stateless, which will improve application performance. However, I noticed that using a stateless component in the wrong place can really reduce application performance.

This is because stateless components are always saved, even if the properties have not changed .

In the case of components, statefulwe can use PureComponent, PureRenderMixinor implement our own shouldComponentUpdate- due to the fact that he noticed a large increase in application performance compared to stateless components.

I wanted to ask if there is any way of implementation, for example, pureRenderfor a stateless component ?. I am not interested in wrapping stateless components in stateful components.

If this is not possible, how does this happen with performance in statelesscomponents?

I prepared two simple examples showing what I wrote. Try changing the active button:

stateful PureComponent:

class List extends React.Component{
  constructor(props) {
    super(props);
    this.generateElements = this.generateElements.bind(this);
    this.changeActive = this.changeActive.bind(this);
    this.state = {
    	active: 0
    }
  }
	generateElements(){
  	let elements = [];
    for(let i = 0; i<=1000; i++){
    	elements.push(<Element key={i} 
      											 index={i}
                             active={this.state.active === i} 
                             changeActive={this.changeActive} /> )
    }
    return elements;
  }
  changeActive(index){
  	this.setState({
    	active: index
    });
  }
  render() {
    return (
    	<div>
        <div className="classButtons">
          {this.generateElements()}
        </div>
      </div>
    )
  }
}

class Element extends React.PureComponent{
  render() {
  console.log('render');
    return(
      <button onClick={this.props.changeActive.bind(null, this.props.index)}
      		    className={this.props.active ? 'active' : null} >
      	Element {this.props.index}
      </button>
    )

  }
}

ReactDOM.render(<List />, document.getElementById('container'));

button{
  display: block;
  margin-bottom: 2px;
}
button.active{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

<div id="container"></div>

Run code

Stand-alone component:

class List extends React.Component{
  constructor(props) {
    super(props);
    this.generateElements = this.generateElements.bind(this);
    this.changeActive = this.changeActive.bind(this);
    this.state = {
    	active: 0
    }
  }
	generateElements(){
  	let elements = [];
    for(let i = 0; i<=1000; i++){
    	elements.push(<Element key={i} 
      											 index={i}
                             active={this.state.active === i} 
                             changeActive={this.changeActive} /> )
    }
    return elements;
  }
  changeActive(index){
  	this.setState({
    	active: index
    });
  }
  render() {
    return (
    	<div>
        <div className="classButtons">
          {this.generateElements()}
        </div>
      </div>
    )
  }
}

const Element = ({changeActive, index, active}) => {
	console.log('render');
  return(
    <button onClick={changeActive.bind(null, index)}
            className={active ? 'active' : null} >
            Element {index}
    </button>
  )
}

ReactDOM.render(<List />, document.getElementById('container'));

button{
  display: block;
  margin-bottom: 2px;
}
button.active{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

<div id="container"></div>

Run code

Answer 1

I noticed, however, that using a stateless component in the wrong place can really slow down application performance.

. .

, ,

... .

, - pureRender ?

, .

, ?

, shouldComponentUpdate, .

---

, React.

, shouldComponentUpdate (, ), , .

:

, ​​ . , .