react-perf/jsx-no-new-function-as-prop Perf
What it does
Prevent functions that are local to the current method from being used as values of JSX props.
Why is this bad?
Using locally defined functions as values for props can lead to unintentional re-renders and performance issues. Every time the parent component renders, a new instance of the function is created, causing unnecessary re-renders of child components. This also leads to harder-to-maintain code as the component's props are not passed consistently.
Examples
Examples of incorrect code for this rule:
jsx
<Item callback={new Function(...)} />
<Item callback={this.props.callback || function() {}} />Examples of correct code for this rule:
jsx
<Item callback={this.props.callback} />Configuration
This rule accepts a configuration object with the following properties:
nativeAllowList
type: array | "all"
nativeAllowList[n]
type: string
How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react-perf"],
"rules": {
"react-perf/jsx-no-new-function-as-prop": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react-perf"],
rules: {
"react-perf/jsx-no-new-function-as-prop": "error",
},
});bash
oxlint --deny react-perf/jsx-no-new-function-as-prop --react-perf-pluginVersion
This rule was added in v0.2.3.