Eslint-plugin-react: Accidental bypass for react/jsx-no-bind allowArrowFunctions

[trevtrich]

We've recently started to get rid of our usage of arrow functions in component props for similar reasons to that mentioned here. We went ahead and set:

'react/jsx-no-bind': ['error', {
      allowArrowFunctions: false,
      allowBind: false,
}]

but realized we were still able to get away with using something like:

const someFunc = () => onClickHandler(userId)
<SomeComponent onClick={someFunc} />

So we didn't fix the problem, we just accidentally tricked it. Is this expected behavior or is this a bug?

[ljharb]

It's not realistic for a rule to always be exhaustive; there's often a way to trick them.

However, it seems reasonable that an arrow function in the same scope should be warned on.

[trevtrich]

Agreed. The primary concern was that for someone not familiar with the implications of anonymous functions in props, they might think the rules is just stylistic. I think checking current scope would reject the 99% case of extracting to a variable.