static propTypes Vs React.PropTypes

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.

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 (:

I think its because the first version

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

is not valid ES6. You can't have a static variable assigned inside the class declaration. If you want to use that version you would need to set your transpiler to include ES7. At least thats my guess given the settings I have at work vs the settings I'm using now.

static propTypes Vs React.PropTypes

Related

Recent Posts