Skip to content

Commit

Permalink
[Docs] jsx-no-bind: reword performance rationale
Browse files Browse the repository at this point in the history
Rewording the performance rationale for jsx-no-bind to clarify that the performance implications are specifically for memoized components.
  • Loading branch information
gpoole authored and ljharb committed May 30, 2023
1 parent 7f655f8 commit ae64aa8
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 2 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
### Changed
* [Docs] [`jsx-newline`], [`no-unsafe`], [`static-property-placement`]: Fix code syntax highlighting ([#3563][] @nbsp1221)
* [readme] resore configuration URL ([#3582][] @gokaygurcan)
* [Docs] [`jsx-no-bind`]: reword performance rationale ([#3581][] @gpoole)

[#3583]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3583
[#3582]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3582
[#3581]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3581
[#3570]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3570
[#3568]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3568
[#3563]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3563
Expand Down
4 changes: 2 additions & 2 deletions docs/rules/jsx-no-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<!-- end auto-generated rule header -->

A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.
Using `bind` on a function or declaring a function in the render method of a component or the body of a functional component, and then passing that function as a prop will mean that the brand new function that is created on every single render will be considered a completely different function. This can affect performance in some situations, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update, such as a component wrapped with [`memo`](https://react.dev/reference/react/memo#memo), or if the prop is used in any hook's "dependency array".

Note that this behavior is different for `ref` props, which is a special case in React that **does not** cause re-renders when a brand new function is passed. See [`ignore-refs`](#ignorerefs) below for more information.

Expand Down Expand Up @@ -207,4 +207,4 @@ const Button = () => {
## When Not To Use It
If you do not use JSX or do not want to enforce that `bind` or arrow functions are not used in props, then you can disable this rule.
If you do not use JSX or do not want to enforce that `bind`, functions declared in the render method of a component, or functions declared in the body of a functional component are not used in props, then you can disable this rule.

0 comments on commit ae64aa8

Please sign in to comment.