Reactjs: Are there advantages to using React components over normal functions?

Question

Taking for example this sample from the React.js docs

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'http://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

React.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

For cases like this, with components with no state, and if I'm not going to use jsx: are there any disadvantages (performance or otherwise) to just using functions instead of creating components? IE, reducing it to something like this (written in ES6)

var { a, div, img } = React.DOM;

var Avatar = (username) =>
    div({}, ProfilePic(username), ProfileLink(username));

var ProfilePic = (username) => 
    img({src: `http://graph.facebook.com/${username}/picture`});

var ProfileLink = (username) =>
    a({href: `http://www.facebook.com/${username}`}, username);

React.render(Avatar(username), document.getElementById('example'))

WiredPrairie · Accepted Answer · 2015-02-12 15:21:59Z

1

If you are not using JSX, and do not need any of the run-time features of the core classes (like componentDidMount, etc), then there is no advantage to creating the classes unnecessarily, and in fact, it will be (slightly) more efficient overall.

By creating concrete (yet very simple) wrapper functions such as you've done with Avatar, it improves code readability. However, if you ever do start using JSX, you'll need to switch to createClass so that properties are properly passed (since the initial properties are not passed to the constructor function as they are in your code).

edited Feb 12, 2015 at 15:21

answered Feb 12, 2015 at 15:11

WiredPrairie

59.9k18 gold badges120 silver badges149 bronze badges

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

Collectives™ on Stack Overflow

Reactjs: Are there advantages to using React components over normal functions?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related