[Fix] no-multi-comp: do not detect a function property returning on…

…ly null as a component Fixes #3412
jsx-eslint · Sep 7, 2022 · 8aa023a · 8aa023a
1 parent 1fa0888
commit 8aa023a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add `viewBox` on `marker` ([#3416][] @ljharb)
 * [`no-unknown-property`]: add `noModule` on `script` ([#3414][] @ljharb)
 * [`no-unknown-property`]: allow `onLoad` on `<object>` ([#3415][] @OleksiiKachan)
+* [`no-multi-comp`]: do not detect a function property returning only null as a component ([#3412][] @ljharb)
 
 ### Changed
 
@@ -18,6 +19,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3415]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3415
 [#3414]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3414
 [#3413]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3413
+[#3412]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3412
 
 ## [7.31.7] - 2022.09.05
 

diff --git a/lib/util/Components.js b/lib/util/Components.js
@@ -592,6 +592,10 @@ function componentRule(rule, context) {
           return undefined;
         }
 
+        if (parent.type === 'Property' && utils.isReturningOnlyNull(node)) {
+          return undefined;
+        }
+
         return node;
       }
 

diff --git a/tests/lib/rules/no-multi-comp.js b/tests/lib/rules/no-multi-comp.js
@@ -236,6 +236,35 @@ ruleTester.run('no-multi-comp', rule, {
         export default MenuList;
       `,
     },
+    {
+      code: `
+        const MenuList = forwardRef(({ onClose, ...props }, ref) => {
+          const onLogout = useCallback(() => {
+            onClose()
+          }, [onClose])
+
+          return (
+            <BlnMenuList ref={ref} {...props}>
+              <BlnMenuItem key="logout" onClick={onLogout}>
+                Logout
+              </BlnMenuItem>
+            </BlnMenuList>
+          )
+        })
+
+        MenuList.displayName = 'MenuList'
+
+        MenuList.propTypes = {
+          onClose: PropTypes.func
+        }
+
+        MenuList.defaultProps = {
+          onClose: () => null
+        }
+
+        export default MenuList
+      `,
+    },
   ]),
 
   invalid: parsers.all([