ReactJS – Stateless function vs Component

Continuing with implementation of new linting rules, I learned that you can have a ReactJS component that is defined as a stateless function, rather than explicitly as a component.

The rule, react/prefer-stateless-function

Stateless functional components are simpler than class based components and will benefit from future React performance optimizations specific to these components.

So instead of defining it as a component:

export default class myComponent extends React.Component{
// component content
}

You can define it as a function:

export default function myComponent(props){
// component content
}

However, one of the neat things about this is that you can still use PropTypes, even though it’s defined as a function.

myComponent.propTypes: {
someProp: React.PropTypes.string.isRequired,
}

And yes, it will still validate the prop types, even though it’s defined as a function!