---
url: /docs/guide/usage/linter/rules/react_perf/jsx-no-new-function-as-prop.md
---

### 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

## Version

This rule was added in v0.2.3.

## References