Avoid unnecessary re-renderings in column settings sidebar (#42595)

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarContainer.tsx

 import type { LocationDescriptor } from "history";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, memo } from "react";
 import { connect } from "react-redux";
 import _ from "underscore";
 
@@ -205,4 +205,4 @@ export default _.compose(
     loadingAndErrorWrapper: false,
   }),
   connect(mapStateToProps, mapDispatchToProps),
-)(MainNavbarContainer);
+)(memo(MainNavbarContainer));

frontend/src/metabase/query_builder/components/view/View.jsx

@@ -61,8 +61,28 @@ class View extends Component {
     } = this.props;
 
     if (isShowingChartSettingsSidebar) {
+      const {
+        question,
+        result,
+        addField,
+        initialChartSetting,
+        onReplaceAllVisualizationSettings,
+        onOpenChartType,
+        visualizationSettings,
+        showSidebarTitle,
+      } = this.props;
       return (
-        <ChartSettingsSidebar {...this.props} onClose={onCloseChartSettings} />
+        <ChartSettingsSidebar
+          question={question}
+          result={result}
+          addField={addField}
+          initialChartSetting={initialChartSetting}
+          onReplaceAllVisualizationSettings={onReplaceAllVisualizationSettings}
+          onOpenChartType={onOpenChartType}
+          visualizationSettings={visualizationSettings}
+          showSidebarTitle={showSidebarTitle}
+          onClose={onCloseChartSettings}
+        />
       );
     }
 

frontend/src/metabase/query_builder/components/view/sidebars/ChartSettingsSidebar.jsx

 /* eslint-disable react/prop-types */
-import { Component } from "react";
+import { useMemo, useCallback, useState, memo } from "react";
 import { t } from "ttag";
 
 import ErrorBoundary from "metabase/ErrorBoundary";
@@ -8,59 +8,71 @@ import SidebarContent from "metabase/query_builder/components/SidebarContent";
 import visualizations from "metabase/visualizations";
 import ChartSettings from "metabase/visualizations/components/ChartSettings";
 
-export default class ChartSettingsSidebar extends Component {
-  state = { sidebarPropsOverride: null };
+function ChartSettingsSidebar(props) {
+  const [sidebarPropsOverride, setSidebarPropsOverride] = useState(null);
+  const handleSidebarPropsOverride = useCallback(
+    sidebarPropsOverride => {
+      setSidebarPropsOverride(sidebarPropsOverride);
+    },
+    [setSidebarPropsOverride],
+  );
 
-  setSidebarPropsOverride = sidebarPropsOverride =>
-    this.setState({ sidebarPropsOverride });
+  const {
+    question,
+    result,
+    addField,
+    initialChartSetting,
+    onReplaceAllVisualizationSettings,
+    onClose,
+    onOpenChartType,
+    visualizationSettings,
+    showSidebarTitle = false,
+  } = props;
+  const sidebarContentProps = showSidebarTitle
+    ? {
+        title: t`${visualizations.get(question.display()).uiName} options`,
+        onBack: () => onOpenChartType(),
+      }
+    : {};
 
-  render() {
-    const {
-      question,
-      result,
-      addField,
-      initialChartSetting,
-      onReplaceAllVisualizationSettings,
-      onClose,
-      onOpenChartType,
-      visualizationSettings,
-      showSidebarTitle = false,
-    } = this.props;
-    const { sidebarPropsOverride } = this.state;
-    const sidebarContentProps = showSidebarTitle
-      ? {
-          title: t`${visualizations.get(question.display()).uiName} options`,
-          onBack: () => onOpenChartType(),
-        }
-      : {};
-    return (
-      result && (
-        <SidebarContent
-          className={CS.fullHeight}
-          onDone={() => onClose()}
-          {...sidebarContentProps}
-          {...sidebarPropsOverride}
-        >
-          <ErrorBoundary>
-            <ChartSettings
-              question={question}
-              addField={addField}
-              series={[
-                {
-                  card: question.card(),
-                  data: result.data,
-                },
-              ]}
-              onChange={onReplaceAllVisualizationSettings}
-              onClose={() => onClose()}
-              noPreview
-              initial={initialChartSetting}
-              setSidebarPropsOverride={this.setSidebarPropsOverride}
-              computedSettings={visualizationSettings}
-            />
-          </ErrorBoundary>
-        </SidebarContent>
-      )
-    );
-  }
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const card = question.card();
+  const series = useMemo(() => {
+    return [
+      {
+        card,
+        data: result.data,
+      },
+    ];
+  }, [card, result.data]);
+
+  return (
+    result && (
+      <SidebarContent
+        className={CS.fullHeight}
+        onDone={handleClose}
+        {...sidebarContentProps}
+        {...sidebarPropsOverride}
+      >
+        <ErrorBoundary>
+          <ChartSettings
+            question={question}
+            addField={addField}
+            series={series}
+            onChange={onReplaceAllVisualizationSettings}
+            onClose={handleClose}
+            noPreview
+            initial={initialChartSetting}
+            setSidebarPropsOverride={handleSidebarPropsOverride}
+            computedSettings={visualizationSettings}
+          />
+        </ErrorBoundary>
+      </SidebarContent>
+    )
+  );
 }
+
+export default memo(ChartSettingsSidebar);

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -209,8 +209,7 @@ class ChartSettings extends Component {
     ).some(widget => !widget.hidden);
   }
 
-  getStyleWidget = () => {
-    const widgets = this._getWidgets();
+  getStyleWidget = widgets => {
     const series = this._getTransformedSeries();
     const settings = this._getComputedSettings();
     const { currentWidget } = this.state;
@@ -258,8 +257,7 @@ class ChartSettings extends Component {
     return null;
   };
 
-  getFormattingWidget = () => {
-    const widgets = this._getWidgets();
+  getFormattingWidget = widgets => {
     const { currentWidget } = this.state;
     const widget =
       currentWidget && widgets.find(widget => widget.id === currentWidget.id);
@@ -418,9 +416,10 @@ class ChartSettings extends Component {
         )}
         <ChartSettingsWidgetPopover
           anchor={popoverRef}
-          widgets={[this.getFormattingWidget(), this.getStyleWidget()].filter(
-            widget => !!widget,
-          )}
+          widgets={[
+            this.getFormattingWidget(widgets),
+            this.getStyleWidget(widgets),
+          ].filter(widget => !!widget)}
           handleEndShowWidget={this.handleEndShowWidget}
         />
       </ChartSettingsRoot>