DEV Community

Cover image for Air BnB React/JSX Styleguide: Day 2 Class vs. React.createClass vs. Stateless
Andrew Weisbeck
Andrew Weisbeck

Posted on

1

Air BnB React/JSX Styleguide: Day 2 Class vs. React.createClass vs. Stateless

Here is day 2 for the Air Bnb Read/JSX style guide review. Yesterday we look at the basics, today we are looking at how Air BnB engineers suggest we look at Class vs. React.createClss vs. Stateless:

  • If you have internal state and/or refs, prefer class extends React.Component over React.createClass. eslint: react/prefer-es6-class react/prefer-stateless-function

So we want to write our components with internal state as:

class Listing extends React.Component {
// ...
  render() {
    return <div>{this.state.hello}</div>
  }
}
Enter fullscreen mode Exit fullscreen mode

And if there is no state or refs, prefer normal functions over classes:

function Listing({ hello }) {
  return <div>{hello}</div>;
}
Enter fullscreen mode Exit fullscreen mode

You don't want to write it as either of the following:

class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// or

const Listing = ({ hello }) => (
  <div>{hello}</div>
);
Enter fullscreen mode Exit fullscreen mode

That is actually very useful to know - I try not to write arrow functions myself very often anyways because I never seem to get them right. Thanks Air BnB!

I'll meditate on that one today...

Meditating

"Whooooooaaaaaaayyyyyyyyuuuuummmmmmmaaaaaayyyyyyyyyeeeeeeeuuuuuuummmmmmmmm..... Whoooooooooooaaaaaaaaayyyyyyyyyuuuuummmmmmmaaaaaaayyyyyyyeeeeeeuuuuuummmmmmmm.... ooooooohhhhhhhhhmmmmmmmmm..."

Thanks for reading!

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Retry later
Retry later