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

In eslint-config-airbnb@19.0.0 (specifically https://github.com/airbnb/javascript/commit/1bc8cabd447ef9ce69d27ae70e67eb47daeffc21), react/function-component-definition was configured to allow only function expressions for named components:

https://github.com/airbnb/javascript/blob/1bc8cabd447ef9ce69d27ae70e67eb47daeffc21/packages/eslint-config-airbnb/rules/react.js#L526-L531

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.

[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.

[ljharb]

re the changelog, I’ll try to do a better job highlighting breaking changes in future releases.

Why? For a number of reasons:

• debugging. arrow functions can never have explicit names, only implicit ones via ES6 name inference, which can be unintuitive and surprisingly missing at times. Consider when you have export const Foo = (props) => {}; and then refactor that to be export const Foo = React.memo((props) => {}) - your “Foo” name suddenly vanishes, because you were relying on inference, probably without realizing it.
• conceptual mismatch. arrow functions are conceptually meant to replace inline callbacks. They are not a general-purpose function replacement, even though they obviously can be used as such. An arrow function doesn’t properly convey the importance/noun-ness of a react component.

See also:

• https://twitter.com/dan_abramov/status/981618859324166146
• https://twitter.com/dan_abramov/status/1093901838179618816