From b9aa04b10d9bb0b7274ad314ca125ddefd9fbdb3 Mon Sep 17 00:00:00 2001 From: Chiawen Chen Date: Thu, 2 Jun 2022 01:13:39 +0800 Subject: [PATCH] [Fix] `display-name`: fix false positive when using memo --- CHANGELOG.md | 2 ++ lib/util/Components.js | 2 +- tests/lib/rules/display-name.js | 13 +++++++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08195c2f21..295709b703 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,11 +8,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange ### Fixed * [`display-name`]: fix false positive for HOF returning only nulls ([#3291][] @golopot) * [`jsx-no-leaked-render`]: avoid unnecessary negation operators and ternary branches deletion ([#3299][] @Belco90) +* [`display-name`]: fix false positive when using memo ([#3304][] @golopot) ### Changed * [Docs] [`jsx-tag-spacing`]: rename option from [#3264][] ([#3294[] @ljharb) * [Docs] [`jsx-key`]: split the examples ([#3293][] @ioggstream) +[#3304]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3304 [#3299]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3299 [#3294]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3294 [#3293]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3293 diff --git a/lib/util/Components.js b/lib/util/Components.js index eb60d845a5..b6114717c5 100644 --- a/lib/util/Components.js +++ b/lib/util/Components.js @@ -515,7 +515,7 @@ function componentRule(rule, context) { // Case like `React.memo(() => <>)` or `React.forwardRef(...)` const pragmaComponentWrapper = utils.getPragmaComponentWrapper(node); - if (pragmaComponentWrapper) { + if (pragmaComponentWrapper && utils.isReturningJSXOrNull(node)) { return pragmaComponentWrapper; } diff --git a/tests/lib/rules/display-name.js b/tests/lib/rules/display-name.js index be0c8442e5..85e076d4d1 100644 --- a/tests/lib/rules/display-name.js +++ b/tests/lib/rules/display-name.js @@ -588,6 +588,19 @@ ruleTester.run('display-name', rule, { } `, }, + { + // issue #3303 + code: ` + function MyComponent(props) { + return {props.name}; + } + + const MemoizedMyComponent = React.memo( + MyComponent, + (prevProps, nextProps) => prevProps.name === nextProps.name + ) + `, + }, ]), invalid: parsers.all([