noJsxPropsBind

JSX and TSX

Summary

Rule available since: v2.3.11
Diagnostic Category: lint/performance/noJsxPropsBind
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- react
Sources:
- Inspired from react/jsx-no-bind

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "performance": {
5
        "noJsxPropsBind": "error"
6
      }
7
    }
8
  }
9
}

Description

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.

Invalid

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

code-block.jsx:1:15 lint/performance/noJsxPropsBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This function will be recreated on every render. Pass stable function references as props to avoid unnecessary rerenders.
  
  > 1 │ <Foo onClick={this._handleClick.bind(this)}></Foo>
      │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ JSX props should not use .bind()
  
  ℹ Consider extracting the function or wrapping it in useCallback

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

code-block.jsx:1:15 lint/performance/noJsxPropsBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This function will be recreated on every render. Pass stable function references as props to avoid unnecessary rerenders.
  
  > 1 │ <Foo onClick={() => console.log(‘Hello!’)}></Foo>
      │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ JSX props should not use arrow functions
  
  ℹ Consider extracting the function or wrapping it in useCallback

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

code-block.jsx:1:15 lint/performance/noJsxPropsBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This function will be recreated on every render. Pass stable function references as props to avoid unnecessary rerenders.
  
  > 1 │ <Foo onClick={function () { console.log(‘Hello!’); }}></Foo>
      │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ JSX props should not use function expressions
  
  ℹ Consider extracting the function or wrapping it in useCallback

Valid

1
<Foo onClick={this._handleClick}></Foo>