noJsxPropsBind

JSX and TSX

Summary

Rule available since: v2.3.11
Diagnostic Category: lint/nursery/noJsxPropsBind
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Inspired from react/jsx-no-bind

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
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/nursery/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
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.jsx:1:15 lint/nursery/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
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.jsx:1:15 lint/nursery/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
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

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