JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 372937
  • Score
    100M100P100Q187003F
  • License MIT

Performance-minded React linting rules for ESLint

Package Exports

  • eslint-plugin-react-perf
  • eslint-plugin-react-perf/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-react-perf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Configuration

As of v3.3.0, each eslint-plugin-react-perf rule supports configuration to control whether native elements (lower case first letter React components) are ignored.

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"]
    }
  ]
}

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:

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.