eslint-plugin-react-perf

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

Installation

1$ npm i eslint-plugin-react-perf

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

1{
2  "plugins": ["react-perf"]
3}

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

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:

1{
2  "react-perf/jsx-no-new-object-as-prop": [
3    "error",
4    {
5      "nativeAllowList": "all"
6    }
7  ]
8}

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

1{
2  "react-perf/jsx-no-new-object-as-prop": [
3    "error",
4    {
5      "nativeAllowList": ["style"]
6    }
7  ]
8}

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:

1import reactPerfPlugin from 'eslint-plugin-react-perf';
2
3const config = [
4  reactPerfPlugin.configs.flat.recommended
5];
6
7export default config;

eslintrc configuration

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

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

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:

1import reactPerfPlugin from 'eslint-plugin-react-perf';
2
3const config = [
4  reactPerfPlugin.configs.flat.all
5];
6
7export default config;

eslintrc configuration

1{
2  "plugins": [
3    "react-perf"
4  ],
5  "extends": ["plugin:react-perf/all"]
6}

Test anti-patterns in runtime

Try out cvazac/test-ref-pattern.

License

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