Looks very modern, but the function here is actually unnamed. Thus, any errors will show up as occurring in <<anonymous>> which is terrible for debugging, and can cause problems with testing as well. Stick to function.
Our Best Practices for Writing React Components
Scott Domes
6.9K95

Absolutely fantastic article! I nodded my head the whole way through, and picked up a few new practice I intend to employ moving forward.

Regarding the quoted excerpt, I did see this was addressed elsewhere in the comments, but it’s probably worth emphasizing that if the example here results in an unnamed function, that’s the result of a bug or misconfiguration in babel and/or webpack (or other bundler).

(For the spec-inclined, you can read up on how this results in a named function in section 12.14.4 Runtime Semantics: Evaluation; the actual name assignment is performed at step 1.e.iii, where the abstract operationSetFunctionName is invoked.)

Both node and Chrome handle this properly natively, and at least in my experience, this is usually reliable when run through babel as well. That being said, const Foo = () => {} doesn’t offer any significant advantages over function Foo() {}, with the possible exception that you may care to ensure that the Foo identifier cannot be reassigned.