Disable the unicorn/consistent-function-scoping rule

[leroykorterink]

There is a proposal to disable the unicorn/consistent-function-scoping rule.

unicorn/consistent-function-scoping: introduces unnecessary verbosity
- @edgardz

[leroykorterink]

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.

Please see the documentation of the rule.

[ThaNarie]

introduces unnecessary verbosity

How does this introduce verbosity? This rule only complains about the location of the code, it doesn't add or remove code itself.

Maybe some code examples could clarify that point?

---

Personally I really agree with the readability part, and mostly related to the assumptions you make when first seeing a piece of code.

If I see a function created in a for loop, I expect that the function needs to be there since it uses something that's defined in the for loop. Or when a function is defined in another function, it must use some of the scope/parameters.

For example:

// doesn't use anything from the component, so has to sit outside
function hiThere() {
  // do something
}

function Component({ onChange }) {
  // uses something from the props
  const doSomethingElse = useCallback(() => {
    // some custom logic
    onChange?.();
  }, [onChange]);

  return (
    <ul>
      {items.map((item) => {
        <li
          /* uses something from the inner loop *//
          onClick={() => doSomething(item)}
          onFoo={() => doSomethingElse()}
          onBar={() => hiThere()}
        >
      })}
   <ul>
}