55

I can't help but wondering if there's any advantage between using plain functions and fat arrows for React functional components

const MyMainComponent = () => (
  <main>
    <h1>Welcome to my app</h1>
  </main>
)

function MyMainComponent() {
  return (
    <main>
      <h1>Welcome to my app</h1>
    </main>
  )
}

Both work of course perfectly fine but is there a recommended way to write those ? Any argument in favor of one or the other ?

Edit: I am aware of the differences when it comes to plain javascript functions (i.e. context, stack trace, return keyword, etc.) that can have an impact for the kind of use you have for functions. However I am asking the question purely in terms of React components.

Dispix
  • 790
  • 1
  • 5
  • 11
  • i've been watching this PR to see if dan has more input on this issue: https://github.com/gaearon/overreacted.io/pull/130 – wmp224 Jan 23 '19 at 15:58
  • 1
    there is not difference on React side. That all falls back in the general js distinction between arrow functions and functions. So difference with `this` context, difference with hoisting etc – quirimmo Jan 23 '19 at 15:58
  • clarity, reuse, consistency, binding caveats... this is preferential. It's the same as using any other function or fat arrow function. – zfrisch Jan 23 '19 at 15:59

2 Answers2

22

There is no practical difference.

An arrow allows to skip return keyword, but cannot benefit from hoisting. This results in less verbose output with ES6 target but more verbose output when transpiled to ES5 , because a function is assigned to a variable:

var MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
};

The overhead is 6 bytes in minified and not gzipped JS file, this consideration can be generally ignored.

Verbosity is not necessarily the case when an arrow is exported, due to optimizations:

var MyMainComponent = (exports.MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
});
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
10

Mostly a matter of preference. However, there are some (minor, almost insignificant) differences:

  • The fat arrow syntax lets you omit the curly braces and the return keyword if you return the JSX directly, without any prior expressions. With ES5 functions, you must have the { return ... }.

  • The fat arrow syntax does not create a new context of this, whereas ES5 functions do. This can be useful when you want this inside the function to reference the React component or when you want to skip the this.foo = this.foo.bind(this); step.

There are more differences between them, but they are rarely relative when coding in React (e.g using arguments, new, etc).

On a personal note, I use the fat arrow syntax whenever possible, as I prefer that syntax.

Chris
  • 57,622
  • 19
  • 111
  • 137
  • 12
    The second item is not the case because functional components have no `this`. – Estus Flask Jan 23 '19 at 16:15
  • 1
    @estus, true. I was referring to the fat arrow syntax in general (e.g for methods). – Chris Jan 23 '19 at 16:16
  • 1
    When using React Dev tools, arrow function components come up as "Anonymous" where named functions display their function name. Making development a little easier. – etoxin Oct 10 '22 at 03:24