Ad

Is There Any Way To Disable Or Speed Up React PropType Validation In Development Mode?

As far as I know the only way to disable React PropType validation is to uglify React with process.env.NODE_ENV defined to be 'production'.

However, I would like to use development mode without runtime PropType validation for the following reasons:

  • They slow down my app significantly. PropType validation is the top offender in profiling results because:
    • I have a fairly deep component hierarchy with PropType validation at multiple levels (yes I do have proper shouldComponentUpdate etc.)
    • I'm using Redux, which means all updates start at or near the top of the hierarchy
    • I have mouse drag interactions which strive for 30 updates per second
  • I still want to see all other React warnings and errors, which would also get disabled in production mode.
  • Flowtype can apparently statically validate PropTypes in a lot of cases anyway.

If nothing else I could create a transformer for babel-plugin-react-transform that strips away all components' propTypes (or perhaps only those of components I've annotated in a certain way), but I'm wondering if there's a simpler way to do it, because React could easily provide a compile-time flag to disable PropType validation.

UPDATE: that babel plugin already exists (https://www.npmjs.com/package/babel-plugin-react-remove-prop-types)

Ad

Answer

Short answer: There is no simple flag to disable only PropType validation


Currently, PropType validation is enabled by __DEV__ global variable. If it's changed to false, you will lose other React warnings and errors that, as you said, you can't.

This code here in ReactDOMFactories shows how ReactElementValidator and ReactElement factories are chosen to define how an element creation will work:

function createDOMFactory(tag) {
  if (__DEV__) {
    return ReactElementValidator.createFactory(tag);
  }
  return Re650e39ddda5ba49245713ef16dbc52d25e9e/src/isomorphic/classic/element/ReactDOMFactories.js#L26" rel="nofollow noreferrer">here in ReactDOMFactories shows how ReactElementValidator and ReactElement factories are chosen to define how an element creation will work:

function createDOMFactory(tag) {
  if (__DEV__) {
    return ReactElementValidator.createFactory(tag);
  }
  return ReactElement.createFactory(tag);
}

In ReactElementValidator.createElement you can see that it calls ReactElement.createElement and then validatePropTypes:

var ReactElementValidator = {

  createElement: function(type, props, children) {

    /* some code here */

    var element = ReactElement.createElement.apply(this, arguments);

    /* some code here */

    // here would be a good place for the flag that you need
    validatePropTypes(element);

    return element;
  }

I'm not sure how this information can help you but at least shows that there is no simple way to disable PropType by a flag as you wondered.


UPDATE - 10/May/2017
Andy found that there is a Babel Plugin that removes Prop Types.
I hadn't test it. Be sure to read the Is it safe? section of the plugin to see if it fits for you.

Ad
source: stackoverflow.com
Ad