React 16.6.0 performance is worse than 16.5.2

Some time ago I did refactoring of cell renderers components to achieve performance gain (I have a huge table). I did refactoring from functional stateless components to PureComponent. E.g.:

import React from 'react';
import PropTypes from 'prop-types';

class SomeCell extends React.PureComponent {
  render() {
    const { obj } = this.props;
    return (
      <>
        {obj.name}
        <br />
        {obj.isin}
      </>
    );
  }
}

SomeCell .propTypes = {
  obj: PropTypes.object,
};

export default SomeCell ;

Now I saw that React.memo was released so I updated to react@16.6.0 and react-dom@16.6.0 (from 16.5.2) and refactored from PureComponent to React.memo with the expectation that it would be even faster (no lifecycle methods called, function smaller than class in memory etc…):

import React from 'react';
import PropTypes from 'prop-types';

const SomeCell = React.memo(function({ obj }) {
  return (
    <>
      {obj.name}
      <br />
      {obj.isin}
    </>
  );
});

SomeCell .propTypes = {
  obj: PropTypes.object,
};

export default SomeCell;

And to my surprise, performance went significantly down.

Profile data in prod mode (no addons in chrome) show that there’s much more scripting happening than before with PureComponent (scripting time for my case went from 0.5s to 3.8sek).

After some investigation, it seems that it is not an issue with React.memo but with the new version of React. I’ve reverted cell renderers to PureComponent and left new react@16.6.0 version and a result (significantly slower performance) is still present.

Do you have any idea what could be the issue with it?

[ryankshaw]

For anyone that needs a quick fix without having to upgrade to webpack 4 (because the terser-webpack-plugin only works webpack 4+) you can just turn off the reduce_funcs compression option for uglify-es (https://www.npmjs.com/package/uglify-es#compress-options). To do that in a webpack config it would look something like:

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          reduce_funcs: false
        }
      }
    })

to verify that it worked I did the following: first:

cat test.js

(function() {
  function FiberNode(fiberNodeArg) {
    this.tag = fiberNodeArg;
  }
  function foo(fooArg) {
    return new FiberNode(fooArg);
  }
//  function bar(barArg) {
//    return new FiberNode(barArg);
//  }
  global.foo = foo;
//  global.bar = bar;
})();

This is how the output looks when using terser (which does not have the bug):

cat test.js | npx terser --compress --mangle

!function(){function n(n){this.tag=n}global.foo=function(o){return new n(o)}}();

this is how the output looks by default with uglify-es

cat test.js | npx uglify-es --compress --mangle

!function(){global.foo=function(n){return new function(n){this.tag=n}(n)}}();`

(has the bug)

and finally, this is how the output looks with uglify-es and the reduce_funcs option set to false

cat test.js | npx uglify-es --compress reduce_funcs=false --mangle

!function(){function n(n){this.tag=n}global.foo=function(o){return new n(o)}}();

(doesn’t have the bug and is the same as what terser outputs)

[benwiley4000]

“Switching minifiers solves the problem” was not the conclusion I expected to find at the bottom of this thread…