Registry / testing / eslint-plugin-react-perf

eslint-plugin-react-perf

library3.3.3jsnpmunverified

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.

testing

npm install eslint-plugin-react-perf

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-perf

testingjavascriptv3.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

reactPerfPlugin

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

✗ const reactPerfPlugin = require('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

✓ "plugins": ["react-perf"]

✗ "plugins": ["eslint-plugin-react-perf"]

When using `.eslintrc` configuration, the plugin name is registered as `react-perf` without the `eslint-plugin-` prefix.

Recommended Configuration

✓ "extends": ["plugin:react-perf/recommended"]

✗ "extends": ["react-perf/recommended"]

For `.eslintrc` files, always prefix `plugin:` when extending a configuration from a plugin.

Flat Config Recommended

✓ reactPerfPlugin.configs.flat.recommended

✗ reactPerfPlugin.configs.recommended

When using flat configuration (`eslint.config.js`), the configurations are nested under `flat`.

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'] } ] } } ];

Debug

Known issues

breakingESLint 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.

affects: >=3.0.0

gotchaRules 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

Errors

Common errors & fixes

ESLint: Definition for rule 'react-perf/jsx-no-new-object-as-prop' was not found.

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

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

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.

Upgrade

Version history

3.3.3latest on npm

Audit

Dependencies

eslintrequiredPeer dependency for ESLint engine compatibility. Required for the plugin to function.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/cvazac/eslint-plugin-react-perf ↗

packagehttps://www.npmjs.com/package/eslint-plugin-react-perf ↗