When write "function" in ReactJS component?

Question

I just started to learn ReactJS and done some tutorials. Have noticed that some write function and others do not. Some examples below. What is the difference? What should I use and when?

Render

With function

var $class$ = React.createClass({
 render: function() {
   return (
     <div />
   );
 }
});

Without function

const $class$ = React.createClass({
  render() {
    return (
      <div />
    );
  }
});

Update

With function

componentDidUpdate: function(prevProps, prevState) {
  $END$
},

Without function

componentDidUpdate(prevProps, prevState) {
  $END$
},

Default Props

With function

getDefaultProps: function() {
  return {
    $END$
  };
},

Without function

getDefaultProps() {
  return {
    $END$
  };
},

Marty · Accepted Answer · 2016-05-03 07:26:22Z

3

Those without the function keyword are the result of using the new shorter ES6 method definitions.

You can read more here: Method Definitions - JavaScript | MDN

As far as I am aware, there is no notable difference in behaviour between a shorthand definition and including the function keyword other than the former having reduced support across environments.

edited May 3, 2016 at 7:26

answered May 3, 2016 at 7:19

Marty

39.5k19 gold badges97 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akshay Arora Over a year ago

I think with Babel transform, the support for both methods should be same.

Marty Over a year ago

@AkshayArora Of course, but potentially using babel doesn't satisfy every possible environment setup so it's still noteworthy :-)

Collectives™ on Stack Overflow

When write "function" in ReactJS component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related