False positive in consistent-function-scoping when using React.useEffect

[kachkaev]

Since #588, consistent-function-scoping is not triggered for the following code:

import { useEffect } from "react";

useEffect(() => {
  function foo() {}
}, []);

This makes sense – see #392. However, when React is imported as a namespace, the same code is no longer valid:

import * as React from "react";

React.useEffect(() => {
  function foo() {} // Move function 'foo' to the outer scope. eslint(unicorn/consistent-function-scoping)
}, []);

Reporting React as a namespace is OK. I prefer this method because it produces smaller git diffs and prevents no-unused-var when refactoring.

Happy to submit a PR with the fix around next weekend. If anyone wants to create one earlier, please feel free to! 🙌

Relevant condition and its test:

eslint-plugin-unicorn/rules/consistent-function-scoping.js

Lines 92 to 97 in d9fd664

	const isReactHook = scope =>
	scope.block
	&& scope.block.parent
	&& scope.block.parent.callee
	&& scope.block.parent.callee.type === 'Identifier'
	&& reactHooks.has(scope.block.parent.callee.name);

eslint-plugin-unicorn/test/consistent-function-scoping.mjs

Lines 266 to 271 in d9fd664

	// React Hooks
	outdent`
	useEffect(() => {
	function foo() {}
	}, [])
	`,

[fisker]

Happy to submit a PR with the fix around next weekend.

I missed this, happy to let you send the PR, you can use

eslint-plugin-unicorn/rules/utils/is-node-matches.js

Line 46 in d9fd664

function isNodeMatches(node, nameOrPaths) {

[kachkaev]

Thanks @fisker! Let me give it a go real quick (unless you have already started) 🙂

[fisker]

I didn't.

[kachkaev]

The fix: #1691 👀