Description
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?