React Performance ESLint Plugin

3.3.3 · active · verified Sun Apr 19

eslint-plugin-react-perf is an ESLint plugin designed to identify and prevent common performance anti-patterns in React applications. It specifically targets situations where new object, array, function, or JSX literals are passed directly as props, which can lead to unnecessary re-renders in components using `React.memo` or `PureComponent` due to shallow comparison failures. The current stable version is 3.3.3. While the README doesn't explicitly state a release cadence, new features and bug fixes appear to be released as needed. Its key differentiator is its focused approach on these specific 'new literal as prop' performance issues, providing a direct solution to a common React optimization pitfall, particularly useful in larger applications or performance-critical components. It provides both `recommended` and `all` configurations for easy setup.

Common errors

```
ESLint: Definition for rule 'react-perf/jsx-no-new-object-as-prop' was not found.
```
cause The plugin is not correctly registered or installed, or there's a typo in the rule name.

fix Ensure `npm i eslint-plugin-react-perf` is run, and the plugin is added to your ESLint configuration. For `.eslintrc`, check `"plugins": ["react-perf"]`. For `eslint.config.js`, ensure `plugins: { 'react-perf': reactPerfPlugin }` is present.
```
ESLint: Cannot read property 'configs' of undefined
```
cause When using flat configuration (`eslint.config.js`), the `reactPerfPlugin` import might be incorrect or the object structure for accessing `configs` is wrong.

fix Verify that you are using `import reactPerfPlugin from 'eslint-plugin-react-perf';` and accessing the configuration via `reactPerfPlugin.configs.flat.recommended` (or `all`). Do not attempt to use `require` with `configs.flat`.
```
Error: Plugin 'react-perf' was conflicted between versions
```
cause Multiple versions of `eslint-plugin-react-perf` are being loaded due to dependency conflicts in your `node_modules`.

fix Run `npm dedupe` or `yarn install --flat` to resolve duplicate package versions. If the issue persists, manually inspect your `node_modules` for multiple installations of the plugin.

Warnings

breaking ESLint introduced a new flat configuration format (eslint.config.js) in v8.x which is fundamentally different from the legacy `.eslintrc` format. The plugin now provides separate configuration objects for each format.
Fix: For new projects or migration, use `import reactPerfPlugin from 'eslint-plugin-react-perf';` and `reactPerfPlugin.configs.flat.recommended` in your `eslint.config.js`. For legacy projects, continue to use `"extends": ["plugin:react-perf/recommended"]` in your `.eslintrc` file.
gotcha Rules like `jsx-no-new-object-as-prop` can generate false positives if you're intentionally creating new objects/arrays/functions for specific reasons (e.g., inline styles or event handlers that need to capture scope) and not relying on `React.memo` for that component.
Fix: Utilize the `nativeAllowList` configuration option to ignore specific attributes on native HTML elements, or wrap your inline values in `useMemo` or `useCallback` hooks, or hoist them outside the render function/component.
gotcha The plugin's rules, while focused on performance, can sometimes conflict with code patterns necessary for certain libraries or specific React features, especially related to inline event handlers or styles.
Fix: Carefully review each rule and its documentation. Disable specific rules where conflicts are unavoidable and justified, or adjust the `nativeAllowList` for particular rules as needed.

Install

npm install eslint-plugin-react-perf npm
yarn add eslint-plugin-react-perf yarn
pnpm add eslint-plugin-react-perf pnpm

Imports

reactPerfPlugin
wrong:
```
const reactPerfPlugin = require('eslint-plugin-react-perf');
```
correct:
```
import reactPerfPlugin from 'eslint-plugin-react-perf';
```
ESM import for new flat configuration (`eslint.config.js`). CommonJS `require` is used for `.eslintrc.js` files where the plugin is listed in the `plugins` array.
react-perf
wrong:
```
"plugins": ["eslint-plugin-react-perf"]
```
correct:
```
"plugins": ["react-perf"]
```
When using `.eslintrc` configuration, the plugin name is registered as `react-perf` without the `eslint-plugin-` prefix.
Recommended Configuration
wrong:
```
"extends": ["react-perf/recommended"]
```
correct:
```
"extends": ["plugin:react-perf/recommended"]
```
For `.eslintrc` files, always prefix `plugin:` when extending a configuration from a plugin.
Flat Config Recommended
wrong:
```
reactPerfPlugin.configs.recommended
```
correct:
```
reactPerfPlugin.configs.flat.recommended
```
When using flat configuration (`eslint.config.js`), the configurations are nested under `flat`.

Quickstart

Demonstrates setting up `eslint-plugin-react-perf` using the new flat configuration format (`eslint.config.js`), extending the recommended rules, and showing how to customize a specific rule to ignore certain native element attributes.

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

export default [
  {
    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        },
        ecmaVersion: 'latest',
        sourceType: 'module'
      },
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    plugins: {
      'react-perf': reactPerfPlugin
    },
    rules: {
      ...reactPerfPlugin.configs.flat.recommended.rules,
      // Example: Override a rule to ignore specific native elements for new object props
      'react-perf/jsx-no-new-object-as-prop': [
        'error',
        {
          'nativeAllowList': ['style', 'data-testid']
        }
      ]
    }
  }
];

view raw JSON →