react-perf/jsx-no-new-array-as-prop Perf

What it does

Prevent arrays that are local to the current method from being used as values of JSX props.

Why is this bad?

Using locally defined arrays as values for props can lead to unintentional re-renders and performance issues. Every time the parent component renders, a new instance of the Array 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 list={[]} />
<Item list={new Array()} />
<Item list={Array()} />
<Item list={this.props.list || []} />
<Item list={this.props.list ? this.props.list : []} />

Examples of correct code for this rule:

jsx

<Item list={this.props.list} />

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:

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

{
  "plugins": ["react-perf"],
  "rules": {
    "react-perf/jsx-no-new-array-as-prop": "error"
  }
}

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react-perf"],
  rules: {
    "react-perf/jsx-no-new-array-as-prop": "error",
  },
});

bash

oxlint --deny react-perf/jsx-no-new-array-as-prop --react-perf-plugin

Version

This rule was added in v0.2.3.

What it does ​

Why is this bad? ​

Examples ​

Configuration ​

nativeAllowList ​

nativeAllowList[n] ​

How to use ​

Version ​

References ​