@zohodesk/eslint-plugin-react-performance

eslint-plugin-react-performance

To improve performance in react redux applications

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-react-performance:

$ npm install eslint-plugin-react-performance --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-react-performance globally.

Usage

Add react-performance to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "react-performance"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "react-performance/rule-name": 2
    }
}

Supported Rules

• Fill in provided rules here

1.0.5

• Linters to Ensure Memory leaks via event listener and intervals and window variables.

• Finding performance issues via new reference on selector functions file excludes changed to use glob pattern rather than regex.

Before

no-new-ref-on-selector-functions: [error, {filenameRegex: /selectors?.js$/i}]

Now

no-new-ref-on-selector-functions: [error, {include: [
        "**/*selector.js",
        "**/*selectors.js",
        "**/*Selector.js",
        "**/*Selectors.js",
        "**/selectors/**/*.js",
]}]

• Finding performance issues via mapstatetoProps new reference, we include a few changes to find out new patterns

function mapStateToProps(state) {
    const newRef = {};

    return {
        newRef  // before it won't errored out, now it will be.
    }
}

function mapStateToProps() {
    const {newRefviaDefaultAssignment = {}} = state; // before it won't errored out, now it will be.
}

• Remove redundant running of useselector function. when passing inline or new reference created function on selector, it will run whenever component renders. we need to avoid it.

function Component(props) {
    const value = useSelector((state) => selector(state)); // new reference created each time when component render, this will inturn trigger running of useSelector each time component render. unnecessary.
}

• When passing entire props to global memoized selector via createSelector, it causes the memory leak.

const memoizedSelector = createSelector([state => state.module.tickets, (_, props) => props.ticketId], (tickets, ticketId) => {
    return Object.keys(tickets[ticketId]);
}); // In this memoized selector, if passed this object, this will be stored and which in turn refer component and DomNodes will be retained, even though, they are not present.

function mapStateToProps(state, props) {

    const value = memoizedSelector(state, props)

}