Skip to content

Commit ae64aa8

Browse files
gpooleljharb
authored andcommitted
[Docs] jsx-no-bind: reword performance rationale
Rewording the performance rationale for jsx-no-bind to clarify that the performance implications are specifically for memoized components.
1 parent 7f655f8 commit ae64aa8

File tree

2 files changed

+4
-2
lines changed

2 files changed

+4
-2
lines changed

CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
2525
### Changed
2626
* [Docs] [`jsx-newline`], [`no-unsafe`], [`static-property-placement`]: Fix code syntax highlighting ([#3563][] @nbsp1221)
2727
* [readme] resore configuration URL ([#3582][] @gokaygurcan)
28+
* [Docs] [`jsx-no-bind`]: reword performance rationale ([#3581][] @gpoole)
2829

2930
[#3583]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3583
3031
[#3582]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3582
32+
[#3581]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3581
3133
[#3570]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3570
3234
[#3568]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3568
3335
[#3563]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3563

docs/rules/jsx-no-bind.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

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

5-
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.
5+
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".
66

77
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.
88

@@ -207,4 +207,4 @@ const Button = () => {
207207
208208
## When Not To Use It
209209
210-
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.
210+
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 commit comments

Comments
 (0)