eatdrinkhealthy / edh-app

The Eat Drink Healthy web (and tentatively mobile / cordova) app created with Meteor and React.
0 stars 0 forks source link

Stateless Components #9

Closed johnthepink closed 7 years ago

johnthepink commented 7 years ago

I'm not sure you have come across these yet, but Stateless Components in React allow you to write components as just regular javascript functions if they are purely presentational (meaning if they do not require lifecycle functions).

For example:

class SomeThing extends React.Component {
  render() {
    return <SomeOtherThing />;
  }
}

...could be re-written as:

const SomeThing = () => {
  return <SomeOtherThing />;
};

...and you could take it even a step further, because the airbnb lint defaults will yell at you about those curly brackets and then only a return statement:

const SomeThing = () => (
  <SomeOtherThing />
);
stevenjmarsh commented 7 years ago

Completely agree. I have a few 'in progress' components I was about to add state to. That's when I ran off to take a look at Redux.

I do have a couple examples of stateless. And intend to follow the pattern as you mentioned.

some examples... Components Filter (currently doesn't have state, was in process of adding) LocationMap (has lifecycle function, was in process of adding state) Marker (used PureComponent, per recommendation of google map package provider)

Stateless Components Navbar Sidebar