no-redundant-should-component-update
Rule category
Correctness.
What it does
Prevents usage of shouldComponentUpdate when extending React.PureComponent.
Why is this bad?
While having shouldComponentUpdate will still work, it becomes pointless to extend React.PureComponent.
Examples
Failing
import React from "react";
class class ExampleExample extends React.class React.PureComponent<P = {}, S = {}, SS = any>PureComponent {
// 'Example' does not need 'shouldComponentUpdate' when extending 'React.PureComponent'.
Example.shouldComponentUpdate(): booleanCalled to determine whether the change in props and state should trigger a re-render.
`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.
If false is returned,
{@link
Component.render
}
, `componentWillUpdate`
and `componentDidUpdate` will not be called.shouldComponentUpdate() {
// do check
return true;
}
Example.render(): React.JSX.Elementrender() {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>Radical!</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}
}Passing
import React from "react";
class class ExampleExample extends React.class React.Component<P = {}, S = {}, SS = any>Component {
Example.shouldComponentUpdate(): booleanCalled to determine whether the change in props and state should trigger a re-render.
`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.
If false is returned,
{@link
Component.render
}
, `componentWillUpdate`
and `componentDidUpdate` will not be called.shouldComponentUpdate() {
// do check
return true;
}
Example.render(): React.JSX.Elementrender() {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>Radical!</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}
}