From ae64aa8fa059fd2b4088642c1b591b8662e6ccc9 Mon Sep 17 00:00:00 2001 From: Greg Poole Date: Tue, 30 May 2023 01:03:17 +0000 Subject: [PATCH] [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. --- CHANGELOG.md | 2 ++ docs/rules/jsx-no-bind.md | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 00fb84de19..31c090ad94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/docs/rules/jsx-no-bind.md b/docs/rules/jsx-no-bind.md index 4124dd3ab4..10141656a6 100644 --- a/docs/rules/jsx-no-bind.md +++ b/docs/rules/jsx-no-bind.md @@ -2,7 +2,7 @@ -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. @@ -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.