static propTypes Vs React.PropTypes

Question

Please do not close this question before reading completely. This may sound like a question which can be answered primarily by one's opinion. But why are there two implementations of PropTypes? Which one is preferred?

One way is to use static keyword and define our propTypes.

class App extends React.Component {   static propTypes = {     ...   } } 

The other way is to do something like this:

class App extends React.Component {   ... }  App.propTypes = {   ... } 

Can we remove the propTypes if we are using static keyword at the time of building app for production? Since removing propTypes is encouraged for performance gains.

Answer 1

This is an es7 version

class App extends React.Component {   static propTypes = {     ...   } } 

while this is the es6 version

class App extends React.Component {   ... }  App.propTypes = {   ... } 

Personally I prefer the es7 version because it makes more sense to view the propTypes at the top of the component, to give an overview of what is needed to render the component (similar to what parameters are needed for a function).

Regardless of which version you are using, if you want to strip propTypes for production, you need to use https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types. Alternatively, you can use https://github.com/thejameskyle/babel-react-optimize which includes the above transform plus a few other goodies since I guess you would also want to optimize your app further (: