{"id":10830,"library":"eslint-plugin-react-perf","title":"React Performance ESLint Plugin","description":"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.","status":"active","version":"3.3.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/cvazac/eslint-plugin-react-perf","tags":["javascript","react","eslint","eslintplugin","eslint-plugin","perf"],"install":[{"cmd":"npm install eslint-plugin-react-perf","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-perf","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-perf","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for ESLint engine compatibility. Required for the plugin to function.","package":"eslint","optional":false}],"imports":[{"note":"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.","wrong":"const reactPerfPlugin = require('eslint-plugin-react-perf');","symbol":"reactPerfPlugin","correct":"import reactPerfPlugin from 'eslint-plugin-react-perf';"},{"note":"When using `.eslintrc` configuration, the plugin name is registered as `react-perf` without the `eslint-plugin-` prefix.","wrong":"\"plugins\": [\"eslint-plugin-react-perf\"]","symbol":"react-perf","correct":"\"plugins\": [\"react-perf\"]"},{"note":"For `.eslintrc` files, always prefix `plugin:` when extending a configuration from a plugin.","wrong":"\"extends\": [\"react-perf/recommended\"]","symbol":"Recommended Configuration","correct":"\"extends\": [\"plugin:react-perf/recommended\"]"},{"note":"When using flat configuration (`eslint.config.js`), the configurations are nested under `flat`.","wrong":"reactPerfPlugin.configs.recommended","symbol":"Flat Config Recommended","correct":"reactPerfPlugin.configs.flat.recommended"}],"quickstart":{"code":"import reactPerfPlugin from 'eslint-plugin-react-perf';\nimport globals from 'globals';\n\nexport default [\n  {\n    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],\n    languageOptions: {\n      parserOptions: {\n        ecmaFeatures: {\n          jsx: true\n        },\n        ecmaVersion: 'latest',\n        sourceType: 'module'\n      },\n      globals: {\n        ...globals.browser,\n        ...globals.node\n      }\n    },\n    plugins: {\n      'react-perf': reactPerfPlugin\n    },\n    rules: {\n      ...reactPerfPlugin.configs.flat.recommended.rules,\n      // Example: Override a rule to ignore specific native elements for new object props\n      'react-perf/jsx-no-new-object-as-prop': [\n        'error',\n        {\n          'nativeAllowList': ['style', 'data-testid']\n        }\n      ]\n    }\n  }\n];","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The plugin is not correctly registered or installed, or there's a typo in the rule name.","error":"ESLint: Definition for rule 'react-perf/jsx-no-new-object-as-prop' was not found."},{"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`.","cause":"When using flat configuration (`eslint.config.js`), the `reactPerfPlugin` import might be incorrect or the object structure for accessing `configs` is wrong.","error":"ESLint: Cannot read property 'configs' of undefined"},{"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.","cause":"Multiple versions of `eslint-plugin-react-perf` are being loaded due to dependency conflicts in your `node_modules`.","error":"Error: Plugin 'react-perf' was conflicted between versions"}],"ecosystem":"npm"}