Skip to content

Commit bdcc569

Browse files
paveltiunovpaveltiunov
committed
fix(react): Evade unnecessary heavy chart renders
1 parent 918ae23 commit bdcc569

6 files changed

Lines changed: 66 additions & 21 deletions

File tree

‎packages/cubejs-playground/src/scaffolding/react/components/QueryBuilder/ExploreQueryBuilder.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ ExploreQueryBuilder.propTypes = {
103103
vizState: PropTypes.object,
104104
setVizState: PropTypes.func,
105105
cubejsApi: PropTypes.object,
106-
chartExtra: PropTypes.object
106+
chartExtra: PropTypes.array
107107
};
108108

109109
ExploreQueryBuilder.defaultProps = {

‎packages/cubejs-react/dist/cubejs-react.esm.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,22 @@ function (_React$Component) {
6565
}
6666
}
6767
}, {
68-
key: "componentDidUpdate",
69-
value: function componentDidUpdate(prevProps) {
68+
key: "shouldComponentUpdate",
69+
value: function shouldComponentUpdate(nextProps, nextState) {
7070
var _this$props2 = this.props,
7171
query = _this$props2.query,
72-
queries = _this$props2.queries;
72+
queries = _this$props2.queries,
73+
render = _this$props2.render,
74+
cubejsApi = _this$props2.cubejsApi,
75+
loadSql = _this$props2.loadSql;
76+
return !equals(nextProps.query, query) || !equals(nextProps.queries, queries) || (nextProps.render == null || render == null) && nextProps.render !== render || nextProps.cubejsApi !== cubejsApi || nextProps.loadSql !== loadSql || !equals(nextState, this.state);
77+
}
78+
}, {
79+
key: "componentDidUpdate",
80+
value: function componentDidUpdate(prevProps) {
81+
var _this$props3 = this.props,
82+
query = _this$props3.query,
83+
queries = _this$props3.queries;
7384

7485
if (!equals(prevProps.query, query)) {
7586
this.load(query);
@@ -90,9 +101,9 @@ function (_React$Component) {
90101
error: null,
91102
sqlQuery: null
92103
});
93-
var _this$props3 = this.props,
94-
loadSql = _this$props3.loadSql,
95-
cubejsApi = _this$props3.cubejsApi;
104+
var _this$props4 = this.props,
105+
loadSql = _this$props4.loadSql,
106+
cubejsApi = _this$props4.cubejsApi;
96107

97108
if (query && QueryRenderer.isQueryPresent(query)) {
98109
if (loadSql === 'only') {

‎packages/cubejs-react/dist/cubejs-react.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,22 @@ function (_React$Component) {
7171
}
7272
}
7373
}, {
74-
key: "componentDidUpdate",
75-
value: function componentDidUpdate(prevProps) {
74+
key: "shouldComponentUpdate",
75+
value: function shouldComponentUpdate(nextProps, nextState) {
7676
var _this$props2 = this.props,
7777
query = _this$props2.query,
78-
queries = _this$props2.queries;
78+
queries = _this$props2.queries,
79+
render = _this$props2.render,
80+
cubejsApi = _this$props2.cubejsApi,
81+
loadSql = _this$props2.loadSql;
82+
return !ramda.equals(nextProps.query, query) || !ramda.equals(nextProps.queries, queries) || (nextProps.render == null || render == null) && nextProps.render !== render || nextProps.cubejsApi !== cubejsApi || nextProps.loadSql !== loadSql || !ramda.equals(nextState, this.state);
83+
}
84+
}, {
85+
key: "componentDidUpdate",
86+
value: function componentDidUpdate(prevProps) {
87+
var _this$props3 = this.props,
88+
query = _this$props3.query,
89+
queries = _this$props3.queries;
7990

8091
if (!ramda.equals(prevProps.query, query)) {
8192
this.load(query);
@@ -96,9 +107,9 @@ function (_React$Component) {
96107
error: null,
97108
sqlQuery: null
98109
});
99-
var _this$props3 = this.props,
100-
loadSql = _this$props3.loadSql,
101-
cubejsApi = _this$props3.cubejsApi;
110+
var _this$props4 = this.props,
111+
loadSql = _this$props4.loadSql,
112+
cubejsApi = _this$props4.cubejsApi;
102113

103114
if (query && QueryRenderer.isQueryPresent(query)) {
104115
if (loadSql === 'only') {

‎packages/cubejs-react/dist/cubejs-react.umd.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6835,11 +6835,22 @@
68356835
}
68366836
}
68376837
}, {
6838-
key: "componentDidUpdate",
6839-
value: function componentDidUpdate(prevProps) {
6838+
key: "shouldComponentUpdate",
6839+
value: function shouldComponentUpdate(nextProps, nextState) {
68406840
var _this$props2 = this.props,
68416841
query = _this$props2.query,
6842-
queries = _this$props2.queries;
6842+
queries = _this$props2.queries,
6843+
render = _this$props2.render,
6844+
cubejsApi = _this$props2.cubejsApi,
6845+
loadSql = _this$props2.loadSql;
6846+
return !equals(nextProps.query, query) || !equals(nextProps.queries, queries) || (nextProps.render == null || render == null) && nextProps.render !== render || nextProps.cubejsApi !== cubejsApi || nextProps.loadSql !== loadSql || !equals(nextState, this.state);
6847+
}
6848+
}, {
6849+
key: "componentDidUpdate",
6850+
value: function componentDidUpdate(prevProps) {
6851+
var _this$props3 = this.props,
6852+
query = _this$props3.query,
6853+
queries = _this$props3.queries;
68436854

68446855
if (!equals(prevProps.query, query)) {
68456856
this.load(query);
@@ -6860,9 +6871,9 @@
68606871
error: null,
68616872
sqlQuery: null
68626873
});
6863-
var _this$props3 = this.props,
6864-
loadSql = _this$props3.loadSql,
6865-
cubejsApi = _this$props3.cubejsApi;
6874+
var _this$props4 = this.props,
6875+
loadSql = _this$props4.loadSql,
6876+
cubejsApi = _this$props4.cubejsApi;
68666877

68676878
if (query && QueryRenderer.isQueryPresent(query)) {
68686879
if (loadSql === 'only') {

‎packages/cubejs-react/src/QueryRenderer.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,18 @@ export default class QueryRenderer extends React.Component {
2424
}
2525
}
2626

27+
shouldComponentUpdate(nextProps, nextState) {
28+
const {
29+
query, queries, render, cubejsApi, loadSql
30+
} = this.props;
31+
return !equals(nextProps.query, query)
32+
|| !equals(nextProps.queries, queries)
33+
|| ((nextProps.render == null || render == null) && nextProps.render !== render)
34+
|| nextProps.cubejsApi !== cubejsApi
35+
|| nextProps.loadSql !== loadSql
36+
|| !equals(nextState, this.state);
37+
}
38+
2739
componentDidUpdate(prevProps) {
2840
const { query, queries } = this.props;
2941
if (!equals(prevProps.query, query)) {

‎packages/cubejs-vue/dist/cubejs-vue.umd.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,7 +1315,7 @@
13151315
// Set @@toStringTag to native iterators
13161316
_setToStringTag(IteratorPrototype, TAG, true);
13171317
// fix for some old engines
1318-
if (!_library && typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
1318+
if (typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
13191319
}
13201320
}
13211321
// fix Array#{values, @@iterator}.name in V8 / FF
@@ -1324,7 +1324,7 @@
13241324
$default = function values() { return $native.call(this); };
13251325
}
13261326
// Define iterator
1327-
if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR$3])) {
1327+
if (BUGGY || VALUES_BUG || !proto[ITERATOR$3]) {
13281328
_hide(proto, ITERATOR$3, $default);
13291329
}
13301330
// Plug for library

0 commit comments

Comments
 (0)