> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# jsx-no-bind

[Added in v0.5.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.5.0)
## Configuration


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-no-bind': 'error',
    },
  },
]);
```

Disallow `.bind()` or arrow functions in JSX props.

## Rule Details

A new function (or an arrow function) is created on every render when `.bind()` or an inline function expression is used as a JSX prop. Passing a new function reference can trigger unnecessary re-renders in memoized consumers or cause effects to re-run.

Examples of **incorrect** code for this rule:

```jsx
<Foo onClick={this._handleClick.bind(this)} />
```

```jsx
<Foo onClick={() => console.log('Hello!')} />
```

```jsx
function onClick() { console.log('Hello!'); }
<Foo onClick={onClick} />
```

Examples of **correct** code for this rule:

```jsx
<Foo onClick={this._handleClick} />
```

## Rule Options

```json
{
  "react/jsx-no-bind": ["error", {
    "allowArrowFunctions": false,
    "allowBind": false,
    "allowFunctions": false,
    "ignoreRefs": false,
    "ignoreDOMComponents": false
  }]
}
```

- `allowArrowFunctions`: allow arrow function expressions as JSX prop values.
- `allowBind`: allow `.bind()` calls as JSX prop values.
- `allowFunctions`: allow function expressions/declarations as JSX prop values.
- `ignoreRefs`: skip checks on `ref` props.
- `ignoreDOMComponents`: skip checks on DOM components (lowercase tags like `<div>`).

## Differences from ESLint

- The ES bind operator (`::`, e.g. `<div foo={::this.onChange} />`) is not supported. Empirically verified: TypeScript's parser rejects the `::` token as a syntax error, so such code never reaches the rule. Consequently the `bindExpression` messageId is not produced.

## Known Limitations (matches ESLint)

- Identifiers used inside conditional expressions are not resolved against tracked declarations, so `<Foo onClick={cond ? tracked : other} />` does not flag `tracked`.
- Only `const` declarations are tracked; `let` / `var` bindings are ignored even when initialized to an arrow / bind / function.
- Forward references (JSX used before the declaration in source order) are not reported.
- A non-violating inner `const` does not shadow a violating outer one; JSX inside the inner scope still reports the outer violation.
- TypeScript-only wrappers (`as T`, `<T>expr`, `expr!`, `expr satisfies T`) are opaque to the rule, matching ESLint's behavior under the `@typescript-eslint/parser`: for example `<Foo onClick={(() => 1) as Handler} />` is **not** flagged. Plain parentheses around an expression _are_ transparent because ESTree does not represent them as nodes.

## Original Documentation

- [eslint-plugin-react: jsx-no-bind](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/jsx-no-bind.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/jsx-no-bind.js)