A component extending React.PureComponent should not override shouldComponentUpdate() lifecycle method

  • REACT_REDUNDANT_SHOULD_COMPONENT_UPDATE
  • Code Quality
  • Low
  • react

This rule applies when a component extending React.PureComponent overrides shouldComponentUpdate() lifecycle method.

React.PureComponent implements shouldComponentUpdate() method to determine re-rendering with a shallow prop and state comparison for rendering performance optimization.

Although overridden shouldComponentUpdate() method will work as intended, it is recommended to extend React.Component instead because React.PureComponent plays no role in such a case. Future versions of React will output a warning message in this case.

Noncompliant Code Example

View with compliant examples side by side
import React from 'react';

export class Hello extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = { greetName: "Hi" };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({ greetName: "Bye" });
    }
    shouldComponentUpdate(nextProps, nextState) { // REACT_REDUNDANT_SHOULD_COMPONENT_UPDATE alarm because 'Hello' component extends 'React.PureComponent' but overrides 'shouldComponentUpdate()'.
        if (nextState.greetName !== this.state.greetName) {
            return true;
        }
        return false;
    }
    render() {
        return (<div onClick={this.handleClick}>{this.state.greetName}</div>);
    }
}

Compliant Code Example

View with noncompliant examples side by side
import React from 'react';

export class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = { greetName: "Hi" };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({ greetName: "Bye" });
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.greetName !== this.state.greetName) {
            return true;
        }
        return false;
    }
    render() {
        return (<div onClick={this.handleClick}>{this.state.greetName}</div>);
    }
}

Version

This rule was introduced in DeepScan 1.4.0-beta.

See

Was this documentation helpful?