React.PureComponent prop should not be specified with an object that is always newly created

• REACT_INEFFICIENT_PURE_COMPONENT_PROP
• Code Quality
• Low
• react

This rule applies when a prop value for React.PureComponent is specified with an object that is always newly created.

The shouldComponentUpdate() method of React.PureComponent checks the change with strict equality on the properties of props and state objects.
In this process, a newly created object is detected as a change and may trigger unnecessary re-rendering.

One of the most common cases of this problem is creating a different callback each time for a prop by an arrow function or a bind call.
We generally recommend using the property initializer syntax or binding in the constructor, to avoid this sort of performance problem.

Noncompliant Code Example

import React from 'react';

class MyButton extends React.PureComponent {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click
      </button>
    );
  }
}

export class App extends React.Component {
  render() {
    // REACT_INEFFICIENT_PURE_COMPONENT_PROP alarm because a newly created object is passed to 'onClick' prop.
    return <MyButton onClick={() => alert('clicked')} />;
  }
}

Compliant Code Example

import React from 'react';

class MyButton extends React.PureComponent {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click
      </button>
    );
  }
}

export class App extends React.Component {
  buttonHandler = () => alert('clicked');

  render() {
    return <MyButton onClick={this.buttonHandler} />;
  }
}

Version

This rule was introduced in DeepScan 1.8.0-beta.

See

• PureComponent

• shouldComponentUpdate()

• React, Inline Functions, and Performance