False positive: react/no-multi-comp

[boonya]

I use eslint-plugin-react@7.29.4 & prop-types in my project. Everything fine. But once I update eslint-plugin-react to 7.31.x even to the latest one which is 7.31.6 currently. I have a false positive error Declare only one React component per file react/no-multi-com issue reported.

[ljharb]

Can you share the actual text code of the file? It's hard to copy-paste an incomplete test case out of a screenshot :-p

[boonya]

import MuiMenuItem from '@material-ui/core/MenuItem';
import MuiMenuList from '@material-ui/core/MenuList';
import PropTypes from 'prop-types';
import {forwardRef, useCallback} from 'react';
import {useTranslation} from 'react-i18next';
import useLogoutHandler from '@src/hooks/useLogoutHandler';

const MenuList = forwardRef(({onClose, ...props}, ref) => {
	const {t} = useTranslation();
	const handleLogout = useLogoutHandler();

	const onLogout = useCallback(() => {
		onClose();
		handleLogout();
	}, [onClose, handleLogout]);

	return (
		<MuiMenuList ref={ref} {...props}>
			<MuiMenuItem key="logout" onClick={onLogout}>
				{t('global-logout')}
			</MuiMenuItem>
		</MuiMenuList>
	);
});

MenuList.displayName = 'MenuList';

MenuList.propTypes = {
	onClose: PropTypes.func,
};

MenuList.defaultProps = {
	onClose: () => null,
};

export default MenuList;

[boonya]

This is only one of them. I have many files where handler is an empty function by default:

Component.defaultProps = {
	onClose: () => null,
};

[ljharb]

hmm, that code passes tests just fine in v7.31.6.

[ljharb]

Happy to reopen this if i can reproduce the failure. My suspicion is that you aren't actually using the latest version of the react plugin.

[boonya]

Interesting. What am I doing wrong?

diff --git a/package-lock.json b/package-lock.json
index dab8ee0d..44b7e8c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^6.0.1",
-        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react": "^7.31.7",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-security": "^1.5.0",
         "eslint-plugin-storybook": "^0.6.4",
@@ -17030,25 +17030,25 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.29.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
-      "integrity": "sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==",
+      "version": "7.31.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.7.tgz",
+      "integrity": "sha512-8NldBTeYp/kQoTV1uT0XF6HcmDqbgZ0lNPkN0wlRw8DJKXEnaWu+oh/6gt3xIhzvQ35wB2Y545fJhIbJSZ2NNw==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flatmap": "^1.2.5",
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
         "doctrine": "^2.1.0",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
         "object.entries": "^1.1.5",
         "object.fromentries": "^2.0.5",
-        "object.hasown": "^1.1.0",
+        "object.hasown": "^1.1.1",
         "object.values": "^1.1.5",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.3",
         "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.6"
+        "string.prototype.matchall": "^4.0.7"
       },
       "engines": {
         "node": ">=4"
@@ -26205,13 +26205,13 @@
       }
     },
     "node_modules/object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
       "dev": true,
       "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -46467,25 +46467,25 @@
       "requires": {}
     },
     "eslint-plugin-react": {
-      "version": "7.29.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
-      "integrity": "sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==",
+      "version": "7.31.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.7.tgz",
+      "integrity": "sha512-8NldBTeYp/kQoTV1uT0XF6HcmDqbgZ0lNPkN0wlRw8DJKXEnaWu+oh/6gt3xIhzvQ35wB2Y545fJhIbJSZ2NNw==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flatmap": "^1.2.5",
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
         "doctrine": "^2.1.0",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
         "object.entries": "^1.1.5",
         "object.fromentries": "^2.0.5",
-        "object.hasown": "^1.1.0",
+        "object.hasown": "^1.1.1",
         "object.values": "^1.1.5",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.3",
         "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.6"
+        "string.prototype.matchall": "^4.0.7"
       },
       "dependencies": {
         "doctrine": {
@@ -53394,13 +53394,13 @@
       }
     },
     "object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "object.pick": {
diff --git a/package.json b/package.json
index 8db42e97..2317ff9b 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.31.7",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^1.5.0",
     "eslint-plugin-storybook": "^0.6.4",

And still

[boonya]

I have created public repository with an example where the issue still exist. You may clone it install dependencies and run npm run lint to see the result.
Actually it is:

[ljharb]

Thanks! I’ll take a look later today.