Performance-minded React linting rules for ESLint
npm install eslint-plugin-react-perfPerformance-minded React linting rules for ESLint (motivated by esamatti's post "React.js pure render performance anti-pattern").
``sh`
$ npm i eslint-plugin-react-perf
Add plugins section and specify eslint-plugin-react-perf as a plugin.
`json`
{
"plugins": ["react-perf"]
}
- 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 valuefunction
- react-perf/jsx-no-new-function-as-prop: Prevent as JSX prop value
- react-perf/jsx-no-jsx-as-prop: Prevent JSX as JSX prop value
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:
`json`
{
"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:
`json`
{
"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:
`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:
`js`
{
"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-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
This plugin also exports an all configuration that includes every available rule.
To enable this configuration add the following to your eslint.config.js:
`js
import reactPerfPlugin from 'eslint-plugin-react-perf';
const config = [
reactPerfPlugin.configs.flat.all
];
export default config;
`
`js``
{
"plugins": [
"react-perf"
],
"extends": ["plugin:react-perf/all"]
}
Try out cvazac/test-ref-pattern.
eslint-plugin-react-perf is licensed under the MIT License.