perf: fix unnecessary re-render (#2573)

fix unnecessary renrender

packages/charts/src/components/chart.tsx

@@ -27,11 +27,11 @@ import { updateChartTitles, updateParentDimensions } from '../state/actions/char
 import { onExternalPointerEvent } from '../state/actions/events';
 import { onComputedZIndex } from '../state/actions/z_index';
 import { chartStoreReducer, GlobalChartState } from '../state/chart_state';
-import { getChartThemeSelector } from '../state/selectors/get_chart_theme';
+import { getChartContainerUpdateStateSelector } from '../state/selectors/chart_container_updates';
 import { getInternalIsInitializedSelector, InitStatus } from '../state/selectors/get_internal_is_intialized';
-import { getLegendConfigSelector } from '../state/selectors/get_legend_config_selector';
 import { ChartSize, getChartSize, getFixedChartSize } from '../utils/chart_size';
 import { LayoutDirection } from '../utils/common';
+import { deepEqual } from '../utils/fast_deep_equal';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 
 /** @public */
@@ -90,20 +90,9 @@ export class Chart extends React.Component<ChartProps, ChartState> {
         return;
       }
 
-      const {
-        legendPosition: { direction },
-      } = getLegendConfigSelector(state);
-      if (this.state.legendDirection !== direction) {
-        this.setState({
-          legendDirection: direction,
-        });
-      }
-      const theme = getChartThemeSelector(state);
-      this.setState({
-        paddingLeft: theme.chartMargins.left,
-        paddingRight: theme.chartMargins.right,
-        displayTitles: state.internalChartState?.canDisplayChartTitles(state) ?? true,
-      });
+      const newState = getChartContainerUpdateStateSelector(state);
+      if (!deepEqual(this.state, newState)) this.setState(newState);
+
       if (state.internalChartState) {
         state.internalChartState.eventCallbacks(state);
       }

packages/charts/src/state/selectors/chart_container_updates.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getChartThemeSelector } from './get_chart_theme';
+import { getInternalCanDisplayChartTitles } from './get_internal_can_display_chart_titles';
+import { getLegendConfigSelector } from './get_legend_config_selector';
+import { LegendPositionConfig } from '../../specs';
+import { createCustomCachedSelector } from '../create_selector';
+
+/** @internal */
+export const getChartContainerUpdateStateSelector = createCustomCachedSelector(
+  [getLegendConfigSelector, getChartThemeSelector, getInternalCanDisplayChartTitles],
+  (
+    legendConfig,
+    theme,
+    displayTitles,
+  ): {
+    paddingLeft: number;
+    paddingRight: number;
+    displayTitles: boolean;
+    legendDirection: LegendPositionConfig['direction'];
+  } => {
+    return {
+      paddingLeft: theme.chartMargins.left,
+      paddingRight: theme.chartMargins.right,
+      displayTitles,
+      legendDirection: legendConfig.legendPosition.direction,
+    };
+  },
+);

packages/charts/src/state/selectors/get_internal_can_display_chart_titles.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { GlobalChartState } from '../chart_state';
+
+/** @internal */
+export const getInternalCanDisplayChartTitles = (state: GlobalChartState): boolean =>
+  state.internalChartState?.canDisplayChartTitles(state) ?? true;