eslint-plugin-react-perf

Performance-minded React linting rules for ESLint (motivated by esamatti's post "React.js pure render performance anti-pattern").

Installation

$ npm i eslint-plugin-react-perf

Add plugins section and specify eslint-plugin-react-perf as a plugin.

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

List of supported rules

• react-perf/jsx-no-new-object-as-prop: Prevent {...} as JSX prop value
• react-perf/jsx-no-new-array-as-prop: Prevent [...] as JSX prop value
• react-perf/jsx-no-new-function-as-prop: Prevent function as JSX prop value
• react-perf/jsx-no-jsx-as-prop: Prevent JSX as JSX prop value

Configuration

Each eslint-plugin-react-perf rule supports options for ignoring certain elements:

• nativeAllowList: Control whether native elements (lowercase first letter React components) are ignored. Accepts "all" or an array of attribute names (case-insensitive) to ignore on native elements.
• allowComponents: Provide an array of component names to ignore entirely. Use the fully qualified component name for member expressions (for example, "Layout.Item").

With this configuration, all native elements are ignored for this rule:

{
  "react-perf/jsx-no-new-object-as-prop": [
    "error",
    {
      "nativeAllowList": "all"
    }
  ]
}

With this configuration, the "style" attribute is ignored for native elements for this rule:

{
  "react-perf/jsx-no-new-object-as-prop": [
    "error",
    {
      "nativeAllowList": ["style"]
    }
  ]
}

With this configuration, CustomButton and Layout.Item components are ignored for this rule:

{
  "react-perf/jsx-no-new-object-as-prop": [
    "error",
    {
      "allowComponents": ["CustomButton", "Layout.Item"]
    }
  ]
}

Recommended

This plugin exports a recommended configuration that enforce React good practices.

Flat configuration

To enable this configuration add the following to your eslint.config.js:

import reactPerfPlugin from 'eslint-plugin-react-perf';

const config = [
  reactPerfPlugin.configs.flat.recommended
];

export default config;

eslintrc configuration

To enable this configuration use the extends property in your .eslintrc config file:

{
  "extends": ["plugin:react-perf/recommended"]
}

See ESLint documentation for more information about extending configuration files.

The rules enabled in this configuration are:

• react-perf/jsx-no-new-object-as-prop
• react-perf/jsx-no-new-array-as-prop
• react-perf/jsx-no-new-function-as-prop
• react-perf/jsx-no-jsx-as-prop

All

This plugin also exports an all configuration that includes every available rule.

Flat configuration

To enable this configuration add the following to your eslint.config.js:

import reactPerfPlugin from 'eslint-plugin-react-perf';

const config = [
  reactPerfPlugin.configs.flat.all
];

export default config;

eslintrc configuration

{
  "plugins": [
    "react-perf"
  ],
  "extends": ["plugin:react-perf/all"]
}

Test anti-patterns in runtime

Try out cvazac/test-ref-pattern.

License

eslint-plugin-react-perf is licensed under the MIT License.