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!