consistent-function-scoping.md

Move function definitions to the highest possible scope

💼 This rule is enabled in the ✅ recommended config.

A function definition should be placed as close to the top-level scope as possible without breaking its captured values. This improves readability, directly improves performance and allows JavaScript engines to better optimize performance.

Fail

export function doFoo(foo) {
	// Does not capture anything from the scope, can be moved to the outer scope
	function doBar(bar) {
		return bar === 'bar';
	}

	return doBar;
}

function doFoo(foo) {
	const doBar = bar => {
		return bar === 'bar';
	};
}

Pass

function doBar(bar) {
	return bar === 'bar';
}

export function doFoo(foo) {
	return doBar;
}

export function doFoo(foo) {
	function doBar(bar) {
		return bar === 'bar' && foo.doBar(bar);
	}

	return doBar;
}

Options

checkArrowFunctions

Type: boolean
Default: true

Pass "checkArrowFunctions": false to disable linting of arrow functions.

Limitations

This rule does not detect or remove extraneous code blocks inside of functions:

function doFoo(foo) {
	{
		function doBar(bar) {
			return bar;
		}
	}

	return foo;
}

It also ignores functions that contain JSXElement references:

function doFoo(FooComponent) {
	function Bar() {
		return <FooComponent/>;
	}

	return Bar;
};

Immediately invoked function expressions (IIFE) are ignored:

(function () {
	function doFoo(bar) {
		return bar;
	}
})();

Built-in Hooks in React are ignored:

useEffect(() => {
	async function getItems() {}

	getItems();
}, [])