cvazac/eslint-plugin-react-perf(opens in a new tab)
Language: JavaScript
Performance-minded React linting rules for ESLint
- stars
- 233
- watchers
- 4
- forks
- 12
- open issues
- 16
- Last updated
- 10/30/2026
Language: JavaScript
Performance-minded React linting rules for ESLint
Performance-minded React linting rules for ESLint (motivated by esamatti's post "React.js pure render performance anti-pattern").
$ npm i eslint-plugin-react-perf
Add plugins section and specify eslint-plugin-react-perf as a plugin.
{
"plugins": ["react-perf"]
}{...} as JSX prop value[...] as JSX prop valuefunction as JSX prop valueAs 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.
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;
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:
react-perf/jsx-no-jsx-as-prop is opt-in. Enable it explicitly or use the all configuration.
This plugin also exports an all configuration that includes every available rule.
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;
{ "plugins": [ "react-perf" ], "extends": ["plugin:react-perf/all"] }
Try out cvazac/test-ref-pattern.
See CONTRIBUTING.md for setup, tests, and dependency updates. See CHANGELOG.md for release changes.
eslint-plugin-react-perf is licensed under the MIT License.