Should stateless functions be declared using named function statements?

[xixixao]

Arrow function syntax is suggested in the docs, but components declared using it don't have a proper name (say in react-dev-tools), StatelessComponent is used instead. I guess this could be an issue when debugging?

[iamdustan]

I believe that is solved in a newer version of the babel react-display-name plugin it generates a name from the file name if an anonymous/unnamed function is used.

I suspect having a proper name for devtools is definitely a solvable (solved?) problem that is likely outside the scope of idiomatic react docs.

[jimfb]

Hmm, this wasn't really a problem prior to stateless components, since classes generally had names.

@spicyj @sebmarkbage We could attach the element name in dev mode, and warnings can pull the name from the elements instead of pulling it off the class. Any reason we don't do that already?

[iamdustan]

@jimfb depending on how you declare your function it isn’t necessarily a problem there either.

I believe that the devtools will display a name for named function declarations like function MyComp() { return <div /> } because MyComp.name === 'MyComp'.

Stateless functions need a displayName property added either statically by the author or by the compiler.

var MyComp = () => <div />; // MyComp.name === ''
var MyComp = function() { return <div /> }; // MyComp.name === ''

I thought that https://phabricator.babeljs.io/diffusion/BC/browse/master/packages/babel-plugin-transform-react-display-name/src/index.js was responsible for this, but a quick reading of the source it only seems to handle React.createClass calls.

[sebmarkbage]

ES2015 specifies a strategy for adding implicit .name based on the variable or property that a an AnonymousFunctionDefinition gets assigned to.

Ideally this would be solved at the Babel level, at least in the DEV mode, so that these functions get a name assigned to them.

Assigning it JSX is not ideal for cases like:

let Component = this.props.componentType;
return <Component />;

[jimfb]

Ok, as per in-person conversation, the current thinking is that it might be useful to have both pieces of information. Then warnings and devtools could print things like 'AdsCreatorTypeAhead' known as 'TypeAhead' when components are referenced by a name that differs from their created name. It would also allow us to print a sensible name when someone exports an anonymous component. To achieve this, we would probably upgrade the https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source transform to add the jsx tag name.

[sophiebits]

Babel 6's babel-plugin-transform-es2015-function-name (or Babel 5's spec.functionName) adds names to functions.

[gaearon]

Closing as either works.

[devinrhode2]

For anyone else noticing this issue. When using next.js v11.0.1 (latest) and react 17.0.2 (latest), using this style will give you proper component name inside react devtools:

export const Foo = () => <div>Foo bar</div>

Therefore, this issue is solved by some combination of tooling. No need to change all code to use function declarations. Just a matter of upgrading to right versions.