`react/function-component-definition` configuration violates style guide

[billyjanitsch]

In eslint-config-airbnb@19.0.0 (specifically 1bc8cab), react/function-component-definition was configured to allow only function expressions for named components:

javascript/packages/eslint-config-airbnb/rules/react.js

Lines 526 to 531 in 1bc8cab

	// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
	// TODO: investigate if setting namedComponents to expression vs declaration is problematic
	'react/function-component-definition': ['error', {
	namedComponents: 'function-expression',
	unnamedComponents: 'function-expression',
	}],

This has the effect of disallowing function declarations:

function Foo() {
  return <div />
}

While allowing only this style:

const Foo = function () {
  return <div />
}

This seems like a configuration mistake, as the React style guide consistently uses function declarations for components (as does the ecosystem as a whole) and specifically points out that "relying on function name inference is discouraged". Let me know if you agree and I'll PR a fix.

[billyjanitsch]

Oops, I searched for existing issues but not PRs. One is already open to fix this: #2501.

[slifty]

Wanted to check: will this end up being corrected at some point?

There are a few thousand folks who seem to be facing issues when trying to write react under the current (9.x) version of the styleguide (this rule combined with rules against anonymous functions results in pretty verbose / un-intuitively repetitive component definitions).

[ljharb]

@slifty yes, it will be corrected soon. btw that seems like a lot of people going to the wrong place; stack overflow isn’t the place to report problems with any software. As far as this issue can tell, there’s only 12 people, not thousands.

[slifty]

@ljharb Awesome thank you (and for all the amazing work you do).

I hear you on the StackOverflow concern! Next time I see this kind of scenario I'll more explicitly suggest commenting on the relevant issue in the answer.