src/content/docs/linter/rules/no-jsx-props-bind.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.11` - Diagnostic Category: [`lint/nursery/noJsxPropsBind`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Inspired from [`react/jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md){
"linter": {
"rules": {
"nursery": {
"noJsxPropsBind": "error"
}
}
}
}
Disallow .bind(), arrow functions, or function expressions in JSX props
Using .bind() or creating a function inline in props creates a new function
on every render, changing identity and defeating memoisation,
which may cause unnecessary rerenders.
<Foo onClick={this._handleClick.bind(this)}></Foo>
<Foo onClick={() => console.log('Hello!')}></Foo>
<Foo onClick={function () { console.log('Hello!'); }}></Foo>
<Foo onClick={this._handleClick}></Foo>