2

When creating functional components which is preferable?

this

const Search = ({searchTerm, onChange, children}) => {
    return (
      <form>
        {children}
        <input
          type='text'
          value={searchTerm}
          onChange={onChange}/>
      </form>
    );
}

or

function Search({searchTerm, onChange, children}) {
  return (
    <form>
      {children}
      <input
        type='text'
        value={searchTerm}
        onChange={onChange}/>
    </form>
  );
}

Babel compiles the ES6 version to 

var Search = function Search(_ref) {
    var searchTerm = _ref.searchTerm,
    onChange = _ref.onChange,
    children = _ref.children;
};

and the ES5 version compiles to 

function Search(_ref) {
    var searchTerm = _ref.searchTerm,
    onChange = _ref.onChange,
    children = _ref.children;
};

Any thoughts on this?

Shayan Javadi
  • 293
  • 3
  • 20
  • Preferable in terms of what? – Evan Trimboli Mar 13 '17 at 20:58
  • 1
    As far as I know, this is entirely up to your style preference. If you are looking for style guides, everyone has their own. However a very prominent one amongst one of the big players is AirBnB which can be [found here](https://github.com/airbnb/javascript/tree/master/react). – Teedub Mar 13 '17 at 20:58
  • 2
    not specific to react, this stack answers the question generally http://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip – azium Mar 13 '17 at 21:02
  • There's no such thing as 'preferable' here. You should know the difference between arrow function and regular function and choose one. In the context of this snippet there's no difference between them. – Estus Flask Mar 13 '17 at 21:15
  • @azium The linked question is about declared functions vs. function declarations, not `=>` functions vs. `function`. – Jordan Running Mar 13 '17 at 21:44
  • @Jordan if you look at the compiled code (provided in the question) you'll see the arrow function is equivalent to a function expression. – azium Mar 14 '17 at 02:00
  • @azium Yep. Nevertheless the question in the title is "Is it preferable to use fat arrow functions or regular ES5 functions?" – Jordan Running Mar 14 '17 at 02:18
  • @jordan Some question titles don't make sense once you know the answer, as earlier comments are pointing out the nuance. – azium Mar 14 '17 at 02:40
  • 1
    @azium That's certainly true. And, indeed, there is nuance to be discussed. `function` expressions and arrow functions are not equivalent, as the link in Bergi's answer explains, but the distinctions between them are not discussed in the question you linked to. – Jordan Running Mar 14 '17 at 02:44

1 Answers1

3

It's totally up to your own style preferences, given that no other differences matter.

I prefer declarations because they are more declarative, need some tokens less to type, and will get hoisted. Only when using a concise body, arrow functions are becoming more compact.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375