fix(react): Evade unnecessary heavy chart renders

Author: paveltiunov

packages/cubejs-playground/src/scaffolding/react/components/ChartRenderer.js

@@ -13,6 +13,7 @@ const renderChart = (Component) => ({ resultSet, error }) => (
 
 const ChartRenderer = ({ vizState, cubejsApi }) => vizState && (
   <QueryRenderer
+    updateOnlyOnStateChange
     query={vizState.query}
     cubejsApi={cubejsApi}
     render={

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

@@ -72,8 +72,14 @@ function (_React$Component) {
           queries = _this$props2.queries,
           render = _this$props2.render,
           cubejsApi = _this$props2.cubejsApi,
-          loadSql = _this$props2.loadSql;
-      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);
+          loadSql = _this$props2.loadSql,
+          updateOnlyOnStateChange = _this$props2.updateOnlyOnStateChange;
+
+      if (!updateOnlyOnStateChange) {
+        return true;
+      }
+
+      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) || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
     }
   }, {
     key: "componentDidUpdate",
@@ -239,13 +245,15 @@ QueryRenderer.propTypes = {
   cubejsApi: object.isRequired,
   query: object,
   queries: object,
-  loadSql: any
+  loadSql: any,
+  updateOnlyOnStateChange: bool
 };
 QueryRenderer.defaultProps = {
   query: null,
   render: null,
   queries: null,
-  loadSql: null
+  loadSql: null,
+  updateOnlyOnStateChange: false
 };
 
 var QueryRendererWithTotals = function QueryRendererWithTotals(_ref) {

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

@@ -78,8 +78,14 @@ function (_React$Component) {
           queries = _this$props2.queries,
           render = _this$props2.render,
           cubejsApi = _this$props2.cubejsApi,
-          loadSql = _this$props2.loadSql;
-      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);
+          loadSql = _this$props2.loadSql,
+          updateOnlyOnStateChange = _this$props2.updateOnlyOnStateChange;
+
+      if (!updateOnlyOnStateChange) {
+        return true;
+      }
+
+      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) || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
     }
   }, {
     key: "componentDidUpdate",
@@ -245,13 +251,15 @@ QueryRenderer.propTypes = {
   cubejsApi: PropTypes.object.isRequired,
   query: PropTypes.object,
   queries: PropTypes.object,
-  loadSql: PropTypes.any
+  loadSql: PropTypes.any,
+  updateOnlyOnStateChange: PropTypes.bool
 };
 QueryRenderer.defaultProps = {
   query: null,
   render: null,
   queries: null,
-  loadSql: null
+  loadSql: null,
+  updateOnlyOnStateChange: false
 };
 
 var QueryRendererWithTotals = function QueryRendererWithTotals(_ref) {

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

@@ -6842,8 +6842,14 @@
 	          queries = _this$props2.queries,
 	          render = _this$props2.render,
 	          cubejsApi = _this$props2.cubejsApi,
-	          loadSql = _this$props2.loadSql;
-	      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);
+	          loadSql = _this$props2.loadSql,
+	          updateOnlyOnStateChange = _this$props2.updateOnlyOnStateChange;
+
+	      if (!updateOnlyOnStateChange) {
+	        return true;
+	      }
+
+	      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) || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
 	    }
 	  }, {
 	    key: "componentDidUpdate",
@@ -7009,13 +7015,15 @@
 	  cubejsApi: PropTypes.object.isRequired,
 	  query: PropTypes.object,
 	  queries: PropTypes.object,
-	  loadSql: PropTypes.any
+	  loadSql: PropTypes.any,
+	  updateOnlyOnStateChange: PropTypes.bool
 	};
 	QueryRenderer.defaultProps = {
 	  query: null,
 	  render: null,
 	  queries: null,
-	  loadSql: null
+	  loadSql: null,
+	  updateOnlyOnStateChange: false
 	};
 
 	var QueryRendererWithTotals = function QueryRendererWithTotals(_ref) {

packages/cubejs-react/src/QueryRenderer.jsx

@@ -26,14 +26,18 @@ export default class QueryRenderer extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     const {
-      query, queries, render, cubejsApi, loadSql
+      query, queries, render, cubejsApi, loadSql, updateOnlyOnStateChange
     } = this.props;
+    if (!updateOnlyOnStateChange) {
+      return true;
+    }
     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);
+      || !equals(nextState, this.state)
+      || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
   }
 
   componentDidUpdate(prevProps) {
@@ -113,12 +117,14 @@ QueryRenderer.propTypes = {
   cubejsApi: PropTypes.object.isRequired,
   query: PropTypes.object,
   queries: PropTypes.object,
-  loadSql: PropTypes.any
+  loadSql: PropTypes.any,
+  updateOnlyOnStateChange: PropTypes.bool
 };
 
 QueryRenderer.defaultProps = {
   query: null,
   render: null,
   queries: null,
-  loadSql: null
+  loadSql: null,
+  updateOnlyOnStateChange: false
 };